@ndla/ui 56.0.159-alpha.0 → 56.0.162-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/dist/panda.buildinfo.json +3 -5
- package/dist/styles.css +2 -10
- package/es/FileList/File.mjs +2 -1
- package/es/FileList/File.mjs.map +1 -1
- package/es/Grid/Grid.mjs +1 -1
- package/es/Grid/Grid.mjs.map +1 -1
- package/es/index.mjs +1 -2
- package/lib/FileList/File.js +2 -1
- package/lib/FileList/File.js.map +1 -1
- package/lib/Gloss/Gloss.d.ts +2 -2
- package/lib/Grid/Grid.js +1 -1
- package/lib/Grid/Grid.js.map +1 -1
- package/lib/index.d.ts +0 -1
- package/lib/index.js +0 -2
- package/package.json +11 -11
- package/src/FileList/File.tsx +2 -2
- package/src/Grid/Grid.stories.tsx +2 -2
- package/src/Grid/Grid.tsx +1 -1
- package/src/Pitch/Pitch.stories.tsx +2 -2
- package/src/index.ts +0 -1
- package/es/Grid/GridParallaxItem.mjs +0 -21
- package/es/Grid/GridParallaxItem.mjs.map +0 -1
- package/lib/Grid/GridParallaxItem.d.ts +0 -9
- package/lib/Grid/GridParallaxItem.js +0 -29
- package/lib/Grid/GridParallaxItem.js.map +0 -1
- package/src/Grid/GridParallaxItem.tsx +0 -26
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"schemaVersion": "1.
|
|
2
|
+
"schemaVersion": "1.7.0",
|
|
3
3
|
"styles": {
|
|
4
4
|
"atomic": [
|
|
5
5
|
"background]___[value:background.default",
|
|
@@ -296,8 +296,8 @@
|
|
|
296
296
|
"gridColumnGap]___[value:medium",
|
|
297
297
|
"backgroundColor]___[value:background.subtle",
|
|
298
298
|
"gridTemplateColumns]___[value:repeat(2, minmax(0, 1fr))",
|
|
299
|
-
"height]___[value:100%]___[cond:&
|
|
300
|
-
"marginTop]___[value:auto]___[cond:&
|
|
299
|
+
"height]___[value:100%]___[cond:& div[data-embed-type='pitch']",
|
|
300
|
+
"marginTop]___[value:auto]___[cond:& div[data-embed-type='pitch']<___>& > :last-child",
|
|
301
301
|
"gridTemplateColumns]___[value:repeat(1, minmax(0, 1fr))]___[cond:tabletDown",
|
|
302
302
|
"gridTemplateColumns]___[value:repeat(2, minmax(0, 1fr))]___[cond:tabletToDesktop",
|
|
303
303
|
"display]___[value:flex]___[cond:tabletToDesktop<___>& > div:nth-child(3):last-child",
|
|
@@ -310,8 +310,6 @@
|
|
|
310
310
|
"backgroundColor]___[value:surface.default",
|
|
311
311
|
"backgroundColor]___[value:transparent",
|
|
312
312
|
"borderColor]___[value:surface.brand.2",
|
|
313
|
-
"top]___[value:var(--masthead-height, 0px)]___[cond:& > div",
|
|
314
|
-
"position]___[value:sticky]___[cond:& > div",
|
|
315
313
|
"paddingBlock]___[value:xxlarge]___[cond:&:not(:has(> img))",
|
|
316
314
|
"width]___[value:surface.3xsmall",
|
|
317
315
|
"textStyle]___[value:heading.large",
|
package/dist/styles.css
CHANGED
|
@@ -1007,10 +1007,6 @@
|
|
|
1007
1007
|
z-index: 0;
|
|
1008
1008
|
}
|
|
1009
1009
|
|
|
1010
|
-
.\[\&_\>_div\]\:pos_sticky > div {
|
|
1011
|
-
position: sticky;
|
|
1012
|
-
}
|
|
1013
|
-
|
|
1014
1010
|
.\[\&_\[data-forward\]\]\:trs-prop_width\,_height [data-forward] {
|
|
1015
1011
|
--transition-prop: width, height;
|
|
1016
1012
|
transition-property: width, height;
|
|
@@ -1078,14 +1074,10 @@
|
|
|
1078
1074
|
min-height: var(--sizes-surface-3xsmall);
|
|
1079
1075
|
}
|
|
1080
1076
|
|
|
1081
|
-
.\[\&
|
|
1077
|
+
.\[\&_div\[data-embed-type\=\'pitch\'\]\]\:h_100\% div[data-embed-type='pitch'] {
|
|
1082
1078
|
height: 100%;
|
|
1083
1079
|
}
|
|
1084
1080
|
|
|
1085
|
-
.\[\&_\>_div\]\:top_var\(--masthead-height\,_0px\) > div {
|
|
1086
|
-
top: var(--masthead-height, 0px);
|
|
1087
|
-
}
|
|
1088
|
-
|
|
1089
1081
|
.focusWithin\:td_none:focus-within {
|
|
1090
1082
|
text-decoration: none;
|
|
1091
1083
|
}
|
|
@@ -1151,7 +1143,7 @@
|
|
|
1151
1143
|
font-weight: var(--font-weights-bold);
|
|
1152
1144
|
}
|
|
1153
1145
|
|
|
1154
|
-
.\[\&
|
|
1146
|
+
.\[\&_div\[data-embed-type\=\'pitch\'\]\]\:\[\&_\>_\:last-child\]\:mt_auto div[data-embed-type='pitch'] > :last-child {
|
|
1155
1147
|
margin-top: auto;
|
|
1156
1148
|
}
|
|
1157
1149
|
|
package/es/FileList/File.mjs
CHANGED
|
@@ -39,7 +39,7 @@ const InfoContainer = styled("div", { base: {
|
|
|
39
39
|
const File = forwardRef(({ title, url, fileExists, fileType, fileSize, ...rest }, ref) => {
|
|
40
40
|
const { t } = useTranslation();
|
|
41
41
|
const filename = `${title}-${url.split("/").pop() ?? ""}`;
|
|
42
|
-
const downloadUrl = `${url}?download
|
|
42
|
+
const downloadUrl = `${url}?download=true`;
|
|
43
43
|
const tooltip = `${t("download")} ${filename}`;
|
|
44
44
|
return /* @__PURE__ */ jsxs(FileContainer, {
|
|
45
45
|
ref,
|
|
@@ -48,6 +48,7 @@ const File = forwardRef(({ title, url, fileExists, fileType, fileSize, ...rest }
|
|
|
48
48
|
/* @__PURE__ */ jsx(DownloadLine, {}),
|
|
49
49
|
fileExists ? /* @__PURE__ */ jsx(StyledSafeLink, {
|
|
50
50
|
unstyled: true,
|
|
51
|
+
download: filename,
|
|
51
52
|
css: linkOverlay.raw(),
|
|
52
53
|
to: downloadUrl,
|
|
53
54
|
title: tooltip,
|
package/es/FileList/File.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"File.mjs","names":[],"sources":["../../src/FileList/File.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 { type ComponentPropsWithRef, forwardRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { DownloadLine } from \"@ndla/icons\";\nimport { Text } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { FileListItem } from \"./FileList\";\n\nexport interface FileProps extends ComponentPropsWithRef<\"div\"> {\n title: string;\n url: string;\n fileExists: boolean;\n fileType: string;\n fileSize?: string;\n}\n\nexport interface FileType {\n title: string;\n formats: FileFormat[];\n fileExists?: boolean;\n}\n\nexport interface FileFormat {\n url: string;\n fileType: string;\n tooltip: string;\n}\n\nconst StyledSafeLink = styled(SafeLink, {\n base: {\n textUnderlineOffset: \"2px\",\n textDecoration: \"underline\",\n _hover: {\n textDecoration: \"none\",\n },\n },\n});\n\nconst FileContainer = styled(\"div\", {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n position: \"relative\",\n paddingBlock: \"small\",\n paddingInlineEnd: \"medium\",\n paddingInlineStart: \"small\",\n width: \"100%\",\n },\n});\n\nconst InfoContainer = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"xxsmall\",\n alignItems: \"center\",\n },\n});\n\nexport const File = forwardRef<HTMLDivElement, FileProps>(\n ({ title, url, fileExists, fileType, fileSize, ...rest }, ref) => {\n const { t } = useTranslation();\n const filename = `${title}-${url.split(\"/\").pop() ?? \"\"}`;\n const downloadUrl = `${url}?download
|
|
1
|
+
{"version":3,"file":"File.mjs","names":[],"sources":["../../src/FileList/File.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 { type ComponentPropsWithRef, forwardRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { DownloadLine } from \"@ndla/icons\";\nimport { Text } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { FileListItem } from \"./FileList\";\n\nexport interface FileProps extends ComponentPropsWithRef<\"div\"> {\n title: string;\n url: string;\n fileExists: boolean;\n fileType: string;\n fileSize?: string;\n}\n\nexport interface FileType {\n title: string;\n formats: FileFormat[];\n fileExists?: boolean;\n}\n\nexport interface FileFormat {\n url: string;\n fileType: string;\n tooltip: string;\n}\n\nconst StyledSafeLink = styled(SafeLink, {\n base: {\n textUnderlineOffset: \"2px\",\n textDecoration: \"underline\",\n _hover: {\n textDecoration: \"none\",\n },\n },\n});\n\nconst FileContainer = styled(\"div\", {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n position: \"relative\",\n paddingBlock: \"small\",\n paddingInlineEnd: \"medium\",\n paddingInlineStart: \"small\",\n width: \"100%\",\n },\n});\n\nconst InfoContainer = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"xxsmall\",\n alignItems: \"center\",\n },\n});\n\nexport const File = forwardRef<HTMLDivElement, FileProps>(\n ({ title, url, fileExists, fileType, fileSize, ...rest }, ref) => {\n const { t } = useTranslation();\n const filename = `${title}-${url.split(\"/\").pop() ?? \"\"}`;\n const downloadUrl = `${url}?download=true`;\n const tooltip = `${t(\"download\")} ${filename}`;\n\n return (\n <FileContainer ref={ref} {...rest}>\n <InfoContainer>\n <DownloadLine />\n {fileExists ? (\n <StyledSafeLink unstyled download={filename} css={linkOverlay.raw()} to={downloadUrl} title={tooltip}>\n {title}\n </StyledSafeLink>\n ) : (\n <Text textStyle=\"label.medium\">{title}</Text>\n )}\n <Text textStyle=\"label.large\" asChild consumeCss>\n <span>({fileType?.toUpperCase()})</span>\n </Text>\n </InfoContainer>\n <Text textStyle=\"label.large\" asChild consumeCss>\n <span>{fileSize}</span>\n </Text>\n </FileContainer>\n );\n },\n);\n\nexport const FileListElement = ({ title, url, fileExists, fileType, fileSize }: FileProps) => (\n <FileListItem>\n <File title={title} url={url} fileExists={fileExists} fileType={fileType} fileSize={fileSize} />\n </FileListItem>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqCA,MAAM,iBAAiB,OAAO,UAAU,EACtC,MAAM;CACJ,qBAAqB;CACrB,gBAAgB;CAChB,QAAQ,EACN,gBAAgB,QACjB;CACF,EACF,CAAC;AAEF,MAAM,gBAAgB,OAAO,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,UAAU;CACV,cAAc;CACd,kBAAkB;CAClB,oBAAoB;CACpB,OAAO;CACR,EACF,CAAC;AAEF,MAAM,gBAAgB,OAAO,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;CACb,EACF,CAAC;AAEF,MAAa,OAAO,YACjB,EAAE,OAAO,KAAK,YAAY,UAAU,UAAU,GAAG,QAAQ,QAAQ;CAChE,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,GAAG,MAAM,GAAG,IAAI,MAAM,IAAI,CAAC,KAAK,IAAI;CACrD,MAAM,cAAc,GAAG,IAAI;CAC3B,MAAM,UAAU,GAAG,EAAE,WAAW,CAAC,GAAG;AAEpC,QACE,qBAAC;EAAmB;EAAK,GAAI;aAC3B,qBAAC;GACC,oBAAC,iBAAe;GACf,aACC,oBAAC;IAAe;IAAS,UAAU;IAAU,KAAK,YAAY,KAAK;IAAE,IAAI;IAAa,OAAO;cAC1F;KACc,GAEjB,oBAAC;IAAK,WAAU;cAAgB;KAAa;GAE/C,oBAAC;IAAK,WAAU;IAAc;IAAQ;cACpC,qBAAC;KAAK;KAAE,UAAU,aAAa;KAAC;QAAQ;KACnC;MACO,EAChB,oBAAC;GAAK,WAAU;GAAc;GAAQ;aACpC,oBAAC,oBAAM,WAAgB;IAClB;GACO;EAGrB;AAED,MAAa,mBAAmB,EAAE,OAAO,KAAK,YAAY,UAAU,eAClE,oBAAC,0BACC,oBAAC;CAAY;CAAY;CAAiB;CAAsB;CAAoB;EAAY,GACnF"}
|
package/es/Grid/Grid.mjs
CHANGED
|
@@ -14,7 +14,7 @@ const GridContainer = styled("div", {
|
|
|
14
14
|
backgroundColor: "background.subtle",
|
|
15
15
|
minWidth: "surface.xxsmall",
|
|
16
16
|
gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
|
|
17
|
-
"&
|
|
17
|
+
"& div[data-embed-type='pitch']": {
|
|
18
18
|
height: "100%",
|
|
19
19
|
"& > :last-child": { marginTop: "auto" }
|
|
20
20
|
},
|
package/es/Grid/Grid.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.mjs","names":[],"sources":["../../src/Grid/Grid.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 { type ComponentProps, type ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst GridContainer = styled(\"div\", {\n base: {\n display: \"grid\",\n justifyContent: \"center\",\n borderRadius: \"xsmall\",\n gridRowGap: \"large\",\n gridColumnGap: \"medium\",\n width: \"100%\",\n backgroundColor: \"background.subtle\",\n minWidth: \"surface.xxsmall\",\n gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n\n \"&
|
|
1
|
+
{"version":3,"file":"Grid.mjs","names":[],"sources":["../../src/Grid/Grid.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 { type ComponentProps, type ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst GridContainer = styled(\"div\", {\n base: {\n display: \"grid\",\n justifyContent: \"center\",\n borderRadius: \"xsmall\",\n gridRowGap: \"large\",\n gridColumnGap: \"medium\",\n width: \"100%\",\n backgroundColor: \"background.subtle\",\n minWidth: \"surface.xxsmall\",\n gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n\n \"& div[data-embed-type='pitch']\": {\n height: \"100%\",\n \"& > :last-child\": {\n marginTop: \"auto\",\n },\n },\n tabletDown: {\n gridTemplateColumns: \"repeat(1, minmax(0, 1fr))\",\n },\n tabletToDesktop: {\n gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n \"& > div:nth-child(3):last-child\": {\n display: \"flex\",\n flexFlow: \"column\",\n justifyContent: \"center\",\n alignItems: \"center\",\n gridColumn: \"span 2\",\n },\n },\n },\n variants: {\n columns: {\n \"2\": {},\n \"2x2\": {},\n \"3\": { desktop: { gridTemplateColumns: \"repeat(3, minmax(0, 1fr))\" } },\n \"4\": { desktop: { gridTemplateColumns: \"repeat(4, minmax(0, 1fr))\" } },\n },\n background: {\n white: { backgroundColor: \"surface.default\" },\n transparent: { backgroundColor: \"transparent\" },\n gray: { backgroundColor: \"background.subtle\" },\n },\n border: {\n lightBlue: {\n padding: \"xsmall\",\n border: \"1px solid\",\n borderColor: \"surface.brand.2\",\n },\n },\n },\n});\n\nexport interface GridProps extends ComponentProps<\"div\"> {\n columns: \"2\" | \"3\" | \"4\" | \"2x2\";\n border?: \"none\" | \"lightBlue\";\n background?: \"transparent\" | \"white\" | \"gray\";\n children?: ReactNode[];\n}\n\nexport const Grid = ({ columns, border, children, background = \"gray\", ...rest }: GridProps) => {\n const amountOfColumns = children?.length === 3 ? \"3\" : columns;\n\n return (\n <GridContainer\n data-embed-type=\"grid\"\n border={border === \"none\" ? undefined : border}\n columns={amountOfColumns}\n background={background}\n {...rest}\n >\n {children}\n </GridContainer>\n );\n};\n"],"mappings":";;;;;AAWA,MAAM,gBAAgB,OAAO,OAAO;CAClC,MAAM;EACJ,SAAS;EACT,gBAAgB;EAChB,cAAc;EACd,YAAY;EACZ,eAAe;EACf,OAAO;EACP,iBAAiB;EACjB,UAAU;EACV,qBAAqB;EAErB,kCAAkC;GAChC,QAAQ;GACR,mBAAmB,EACjB,WAAW,QACZ;GACF;EACD,YAAY,EACV,qBAAqB,6BACtB;EACD,iBAAiB;GACf,qBAAqB;GACrB,mCAAmC;IACjC,SAAS;IACT,UAAU;IACV,gBAAgB;IAChB,YAAY;IACZ,YAAY;IACb;GACF;EACF;CACD,UAAU;EACR,SAAS;GACP,KAAK,EAAE;GACP,OAAO,EAAE;GACT,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACtE,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACvE;EACD,YAAY;GACV,OAAO,EAAE,iBAAiB,mBAAmB;GAC7C,aAAa,EAAE,iBAAiB,eAAe;GAC/C,MAAM,EAAE,iBAAiB,qBAAqB;GAC/C;EACD,QAAQ,EACN,WAAW;GACT,SAAS;GACT,QAAQ;GACR,aAAa;GACd,EACF;EACF;CACF,CAAC;AASF,MAAa,QAAQ,EAAE,SAAS,QAAQ,UAAU,aAAa,QAAQ,GAAG,WAAsB;CAC9F,MAAM,kBAAkB,UAAU,WAAW,IAAI,MAAM;AAEvD,QACE,oBAAC;EACC,mBAAgB;EAChB,QAAQ,WAAW,SAAS,SAAY;EACxC,SAAS;EACG;EACZ,GAAI;EAEH;GACa"}
|
package/es/index.mjs
CHANGED
|
@@ -56,9 +56,8 @@ import { KeyFigure } from "./KeyFigure/KeyFigure.mjs";
|
|
|
56
56
|
import { ContactBlock, contactBlockBackgrounds } from "./ContactBlock/ContactBlock.mjs";
|
|
57
57
|
import { CampaignBlock } from "./CampaignBlock/CampaignBlock.mjs";
|
|
58
58
|
import { Grid } from "./Grid/Grid.mjs";
|
|
59
|
-
import { GridParallaxItem } from "./Grid/GridParallaxItem.mjs";
|
|
60
59
|
import { LinkBlock } from "./LinkBlock/LinkBlock.mjs";
|
|
61
60
|
import { LinkBlockSection } from "./LinkBlock/LinkBlockSection.mjs";
|
|
62
61
|
import { ZendeskButton } from "./ZendeskButton/ZendeskButton.mjs";
|
|
63
62
|
|
|
64
|
-
export { Article, ArticleByline, ArticleBylineAccordionItem, ArticleContent, ArticleFootNotes, ArticleFooter, ArticleHGroup, ArticleHeader, ArticleTitle, ArticleWrapper, AudioEmbed, AudioPlayer, BadgesContainer, BlockConcept, Breadcrumb, BrightcoveEmbed, CampaignBlock, CodeBlock, CodeEmbed, Concept, ConceptEmbed, ConceptInlineTriggerButton, ContactBlock, ContentLinkEmbed, ContentTypeBadge, CopyParagraphButton, CopyrightEmbed, EmbedByline, EmbedWrapper, ExternalEmbed, FactBox, File, FileListElement, FileListEmbed, FileListItem, FileListWrapper, FootnoteEmbed, Gloss, GlossExample, Grid,
|
|
63
|
+
export { Article, ArticleByline, ArticleBylineAccordionItem, ArticleContent, ArticleFootNotes, ArticleFooter, ArticleHGroup, ArticleHeader, ArticleTitle, ArticleWrapper, AudioEmbed, AudioPlayer, BadgesContainer, BlockConcept, Breadcrumb, BrightcoveEmbed, CampaignBlock, CodeBlock, CodeEmbed, Concept, ConceptEmbed, ConceptInlineTriggerButton, ContactBlock, ContentLinkEmbed, ContentTypeBadge, CopyParagraphButton, CopyrightEmbed, EmbedByline, EmbedWrapper, ExternalEmbed, FactBox, File, FileListElement, FileListEmbed, FileListItem, FileListWrapper, FootnoteEmbed, Gloss, GlossExample, Grid, H5pEmbed, HomeBreadcrumb, IframeEmbed, ImageEmbed, InlineConcept, InlineTriggerButton, KeyFigure, LicenseLink, LinkBlock, LinkBlockSection, PdfFile, Pitch, RelatedArticle, RelatedArticleList, RelatedContentEmbed, ResourceBox, TagSelectorClearTrigger, TagSelectorControl, TagSelectorInput, TagSelectorInputBase, TagSelectorItemInput, TagSelectorLabel, TagSelectorRoot, TagSelectorTrigger, UnknownEmbed, UuDisclaimerEmbed, ZendeskButton, codeLanguageOptions, constants, contactBlockBackgrounds, contentTypeMapping, contentTypeToBadgeVariantMap, contentTypes, formatNestedMessages, getCrop, getFocalPoint, getPossiblyRelativeUrl, licenseAttributes, messages_en_default as messagesEN, messages_nb_default as messagesNB, messages_nn_default as messagesNN, messages_se_default as messagesSE, resourceEmbedTypeMapping, subjectCategories, subjectTypes, useAudioSearchTranslations, useComboboxTranslations, useDatePickerTranslations, useImageSearchTranslations, usePaginationTranslations, useTagSelectorTranslations, useTagsInputTranslations, useVideoSearchTranslations, wordClass };
|
package/lib/FileList/File.js
CHANGED
|
@@ -40,7 +40,7 @@ const InfoContainer = (0, __ndla_styled_system_jsx.styled)("div", { base: {
|
|
|
40
40
|
const File = (0, react.forwardRef)(({ title, url, fileExists, fileType, fileSize, ...rest }, ref) => {
|
|
41
41
|
const { t } = (0, react_i18next.useTranslation)();
|
|
42
42
|
const filename = `${title}-${url.split("/").pop() ?? ""}`;
|
|
43
|
-
const downloadUrl = `${url}?download
|
|
43
|
+
const downloadUrl = `${url}?download=true`;
|
|
44
44
|
const tooltip = `${t("download")} ${filename}`;
|
|
45
45
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FileContainer, {
|
|
46
46
|
ref,
|
|
@@ -49,6 +49,7 @@ const File = (0, react.forwardRef)(({ title, url, fileExists, fileType, fileSize
|
|
|
49
49
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.DownloadLine, {}),
|
|
50
50
|
fileExists ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSafeLink, {
|
|
51
51
|
unstyled: true,
|
|
52
|
+
download: filename,
|
|
52
53
|
css: __ndla_styled_system_patterns.linkOverlay.raw(),
|
|
53
54
|
to: downloadUrl,
|
|
54
55
|
title: tooltip,
|
package/lib/FileList/File.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"File.js","names":["SafeLink","DownloadLine","linkOverlay","Text","FileListItem"],"sources":["../../src/FileList/File.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 { type ComponentPropsWithRef, forwardRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { DownloadLine } from \"@ndla/icons\";\nimport { Text } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { FileListItem } from \"./FileList\";\n\nexport interface FileProps extends ComponentPropsWithRef<\"div\"> {\n title: string;\n url: string;\n fileExists: boolean;\n fileType: string;\n fileSize?: string;\n}\n\nexport interface FileType {\n title: string;\n formats: FileFormat[];\n fileExists?: boolean;\n}\n\nexport interface FileFormat {\n url: string;\n fileType: string;\n tooltip: string;\n}\n\nconst StyledSafeLink = styled(SafeLink, {\n base: {\n textUnderlineOffset: \"2px\",\n textDecoration: \"underline\",\n _hover: {\n textDecoration: \"none\",\n },\n },\n});\n\nconst FileContainer = styled(\"div\", {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n position: \"relative\",\n paddingBlock: \"small\",\n paddingInlineEnd: \"medium\",\n paddingInlineStart: \"small\",\n width: \"100%\",\n },\n});\n\nconst InfoContainer = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"xxsmall\",\n alignItems: \"center\",\n },\n});\n\nexport const File = forwardRef<HTMLDivElement, FileProps>(\n ({ title, url, fileExists, fileType, fileSize, ...rest }, ref) => {\n const { t } = useTranslation();\n const filename = `${title}-${url.split(\"/\").pop() ?? \"\"}`;\n const downloadUrl = `${url}?download
|
|
1
|
+
{"version":3,"file":"File.js","names":["SafeLink","DownloadLine","linkOverlay","Text","FileListItem"],"sources":["../../src/FileList/File.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 { type ComponentPropsWithRef, forwardRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { DownloadLine } from \"@ndla/icons\";\nimport { Text } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { FileListItem } from \"./FileList\";\n\nexport interface FileProps extends ComponentPropsWithRef<\"div\"> {\n title: string;\n url: string;\n fileExists: boolean;\n fileType: string;\n fileSize?: string;\n}\n\nexport interface FileType {\n title: string;\n formats: FileFormat[];\n fileExists?: boolean;\n}\n\nexport interface FileFormat {\n url: string;\n fileType: string;\n tooltip: string;\n}\n\nconst StyledSafeLink = styled(SafeLink, {\n base: {\n textUnderlineOffset: \"2px\",\n textDecoration: \"underline\",\n _hover: {\n textDecoration: \"none\",\n },\n },\n});\n\nconst FileContainer = styled(\"div\", {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n position: \"relative\",\n paddingBlock: \"small\",\n paddingInlineEnd: \"medium\",\n paddingInlineStart: \"small\",\n width: \"100%\",\n },\n});\n\nconst InfoContainer = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"xxsmall\",\n alignItems: \"center\",\n },\n});\n\nexport const File = forwardRef<HTMLDivElement, FileProps>(\n ({ title, url, fileExists, fileType, fileSize, ...rest }, ref) => {\n const { t } = useTranslation();\n const filename = `${title}-${url.split(\"/\").pop() ?? \"\"}`;\n const downloadUrl = `${url}?download=true`;\n const tooltip = `${t(\"download\")} ${filename}`;\n\n return (\n <FileContainer ref={ref} {...rest}>\n <InfoContainer>\n <DownloadLine />\n {fileExists ? (\n <StyledSafeLink unstyled download={filename} css={linkOverlay.raw()} to={downloadUrl} title={tooltip}>\n {title}\n </StyledSafeLink>\n ) : (\n <Text textStyle=\"label.medium\">{title}</Text>\n )}\n <Text textStyle=\"label.large\" asChild consumeCss>\n <span>({fileType?.toUpperCase()})</span>\n </Text>\n </InfoContainer>\n <Text textStyle=\"label.large\" asChild consumeCss>\n <span>{fileSize}</span>\n </Text>\n </FileContainer>\n );\n },\n);\n\nexport const FileListElement = ({ title, url, fileExists, fileType, fileSize }: FileProps) => (\n <FileListItem>\n <File title={title} url={url} fileExists={fileExists} fileType={fileType} fileSize={fileSize} />\n </FileListItem>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAqCA,MAAM,sDAAwBA,0BAAU,EACtC,MAAM;CACJ,qBAAqB;CACrB,gBAAgB;CAChB,QAAQ,EACN,gBAAgB,QACjB;CACF,EACF,CAAC;AAEF,MAAM,qDAAuB,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,UAAU;CACV,cAAc;CACd,kBAAkB;CAClB,oBAAoB;CACpB,OAAO;CACR,EACF,CAAC;AAEF,MAAM,qDAAuB,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;CACb,EACF,CAAC;AAEF,MAAa,8BACV,EAAE,OAAO,KAAK,YAAY,UAAU,UAAU,GAAG,QAAQ,QAAQ;CAChE,MAAM,EAAE,yCAAsB;CAC9B,MAAM,WAAW,GAAG,MAAM,GAAG,IAAI,MAAM,IAAI,CAAC,KAAK,IAAI;CACrD,MAAM,cAAc,GAAG,IAAI;CAC3B,MAAM,UAAU,GAAG,EAAE,WAAW,CAAC,GAAG;AAEpC,QACE,4CAAC;EAAmB;EAAK,GAAI;aAC3B,4CAAC;GACC,2CAACC,8BAAe;GACf,aACC,2CAAC;IAAe;IAAS,UAAU;IAAU,KAAKC,0CAAY,KAAK;IAAE,IAAI;IAAa,OAAO;cAC1F;KACc,GAEjB,2CAACC;IAAK,WAAU;cAAgB;KAAa;GAE/C,2CAACA;IAAK,WAAU;IAAc;IAAQ;cACpC,4CAAC;KAAK;KAAE,UAAU,aAAa;KAAC;QAAQ;KACnC;MACO,EAChB,2CAACA;GAAK,WAAU;GAAc;GAAQ;aACpC,2CAAC,oBAAM,WAAgB;IAClB;GACO;EAGrB;AAED,MAAa,mBAAmB,EAAE,OAAO,KAAK,YAAY,UAAU,eAClE,2CAACC,2CACC,2CAAC;CAAY;CAAY;CAAiB;CAAsB;CAAoB;EAAY,GACnF"}
|
package/lib/Gloss/Gloss.d.ts
CHANGED
|
@@ -7,9 +7,9 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import type { StyledVariantProps } from "@ndla/styled-system/types";
|
|
9
9
|
import type { ConceptTitleDTO, GlossDataDTO } from "@ndla/types-backend/concept-api";
|
|
10
|
-
declare const StyledAccordionItem: import("@ndla/styled-system/types").StyledComponent<import("react").ComponentClass<import("@ndla/styled-system/types").JsxHTMLProps<import("@ark-ui/react").AccordionItemProps & import("react").RefAttributes<HTMLDivElement> & import("@ndla/styled-system/jsx").UnstyledProps, import("@ndla/styled-system/types").JsxStyleProps>, any>, {
|
|
10
|
+
declare const StyledAccordionItem: import("@ndla/styled-system/types").StyledComponent<import("react").ComponentClass<import("@ndla/styled-system/types").JsxHTMLProps<import("@ark-ui/react").AccordionItemProps & import("react").RefAttributes<HTMLDivElement> & import("@ndla/styled-system/jsx").UnstyledProps & import("@ndla/styled-system/types").AsProps, import("@ndla/styled-system/types").JsxStyleProps>, any>, {
|
|
11
11
|
variant?: "simple" | "bordered" | undefined;
|
|
12
|
-
}> | import("@ndla/styled-system/types").StyledComponent<import("react").FunctionComponent<import("@ndla/styled-system/types").JsxHTMLProps<import("@ark-ui/react").AccordionItemProps & import("react").RefAttributes<HTMLDivElement> & import("@ndla/styled-system/jsx").UnstyledProps, import("@ndla/styled-system/types").JsxStyleProps>>, {
|
|
12
|
+
}> | import("@ndla/styled-system/types").StyledComponent<import("react").FunctionComponent<import("@ndla/styled-system/types").JsxHTMLProps<import("@ark-ui/react").AccordionItemProps & import("react").RefAttributes<HTMLDivElement> & import("@ndla/styled-system/jsx").UnstyledProps & import("@ndla/styled-system/types").AsProps, import("@ndla/styled-system/types").JsxStyleProps>>, {
|
|
13
13
|
variant?: "simple" | "bordered" | undefined;
|
|
14
14
|
}>;
|
|
15
15
|
type GlossVariantProps = StyledVariantProps<typeof StyledAccordionItem>;
|
package/lib/Grid/Grid.js
CHANGED
|
@@ -22,7 +22,7 @@ const GridContainer = (0, __ndla_styled_system_jsx.styled)("div", {
|
|
|
22
22
|
backgroundColor: "background.subtle",
|
|
23
23
|
minWidth: "surface.xxsmall",
|
|
24
24
|
gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
|
|
25
|
-
"&
|
|
25
|
+
"& div[data-embed-type='pitch']": {
|
|
26
26
|
height: "100%",
|
|
27
27
|
"& > :last-child": { marginTop: "auto" }
|
|
28
28
|
},
|
package/lib/Grid/Grid.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.js","names":[],"sources":["../../src/Grid/Grid.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 { type ComponentProps, type ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst GridContainer = styled(\"div\", {\n base: {\n display: \"grid\",\n justifyContent: \"center\",\n borderRadius: \"xsmall\",\n gridRowGap: \"large\",\n gridColumnGap: \"medium\",\n width: \"100%\",\n backgroundColor: \"background.subtle\",\n minWidth: \"surface.xxsmall\",\n gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n\n \"&
|
|
1
|
+
{"version":3,"file":"Grid.js","names":[],"sources":["../../src/Grid/Grid.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 { type ComponentProps, type ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst GridContainer = styled(\"div\", {\n base: {\n display: \"grid\",\n justifyContent: \"center\",\n borderRadius: \"xsmall\",\n gridRowGap: \"large\",\n gridColumnGap: \"medium\",\n width: \"100%\",\n backgroundColor: \"background.subtle\",\n minWidth: \"surface.xxsmall\",\n gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n\n \"& div[data-embed-type='pitch']\": {\n height: \"100%\",\n \"& > :last-child\": {\n marginTop: \"auto\",\n },\n },\n tabletDown: {\n gridTemplateColumns: \"repeat(1, minmax(0, 1fr))\",\n },\n tabletToDesktop: {\n gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n \"& > div:nth-child(3):last-child\": {\n display: \"flex\",\n flexFlow: \"column\",\n justifyContent: \"center\",\n alignItems: \"center\",\n gridColumn: \"span 2\",\n },\n },\n },\n variants: {\n columns: {\n \"2\": {},\n \"2x2\": {},\n \"3\": { desktop: { gridTemplateColumns: \"repeat(3, minmax(0, 1fr))\" } },\n \"4\": { desktop: { gridTemplateColumns: \"repeat(4, minmax(0, 1fr))\" } },\n },\n background: {\n white: { backgroundColor: \"surface.default\" },\n transparent: { backgroundColor: \"transparent\" },\n gray: { backgroundColor: \"background.subtle\" },\n },\n border: {\n lightBlue: {\n padding: \"xsmall\",\n border: \"1px solid\",\n borderColor: \"surface.brand.2\",\n },\n },\n },\n});\n\nexport interface GridProps extends ComponentProps<\"div\"> {\n columns: \"2\" | \"3\" | \"4\" | \"2x2\";\n border?: \"none\" | \"lightBlue\";\n background?: \"transparent\" | \"white\" | \"gray\";\n children?: ReactNode[];\n}\n\nexport const Grid = ({ columns, border, children, background = \"gray\", ...rest }: GridProps) => {\n const amountOfColumns = children?.length === 3 ? \"3\" : columns;\n\n return (\n <GridContainer\n data-embed-type=\"grid\"\n border={border === \"none\" ? undefined : border}\n columns={amountOfColumns}\n background={background}\n {...rest}\n >\n {children}\n </GridContainer>\n );\n};\n"],"mappings":";;;;;;;;;;;;;AAWA,MAAM,qDAAuB,OAAO;CAClC,MAAM;EACJ,SAAS;EACT,gBAAgB;EAChB,cAAc;EACd,YAAY;EACZ,eAAe;EACf,OAAO;EACP,iBAAiB;EACjB,UAAU;EACV,qBAAqB;EAErB,kCAAkC;GAChC,QAAQ;GACR,mBAAmB,EACjB,WAAW,QACZ;GACF;EACD,YAAY,EACV,qBAAqB,6BACtB;EACD,iBAAiB;GACf,qBAAqB;GACrB,mCAAmC;IACjC,SAAS;IACT,UAAU;IACV,gBAAgB;IAChB,YAAY;IACZ,YAAY;IACb;GACF;EACF;CACD,UAAU;EACR,SAAS;GACP,KAAK,EAAE;GACP,OAAO,EAAE;GACT,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACtE,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACvE;EACD,YAAY;GACV,OAAO,EAAE,iBAAiB,mBAAmB;GAC7C,aAAa,EAAE,iBAAiB,eAAe;GAC/C,MAAM,EAAE,iBAAiB,qBAAqB;GAC/C;EACD,QAAQ,EACN,WAAW;GACT,SAAS;GACT,QAAQ;GACR,aAAa;GACd,EACF;EACF;CACF,CAAC;AASF,MAAa,QAAQ,EAAE,SAAS,QAAQ,UAAU,aAAa,QAAQ,GAAG,WAAsB;CAC9F,MAAM,kBAAkB,UAAU,WAAW,IAAI,MAAM;AAEvD,QACE,2CAAC;EACC,mBAAgB;EAChB,QAAQ,WAAW,SAAS,SAAY;EACxC,SAAS;EACG;EACZ,GAAI;EAEH;GACa"}
|
package/lib/index.d.ts
CHANGED
|
@@ -64,7 +64,6 @@ export { ContactBlock, contactBlockBackgrounds } from "./ContactBlock/ContactBlo
|
|
|
64
64
|
export type { ContactBlockBackground } from "./ContactBlock/ContactBlock";
|
|
65
65
|
export { CampaignBlock } from "./CampaignBlock/CampaignBlock";
|
|
66
66
|
export { Grid } from "./Grid/Grid";
|
|
67
|
-
export { GridParallaxItem } from "./Grid/GridParallaxItem";
|
|
68
67
|
export type { GridProps as GridType } from "./Grid/Grid";
|
|
69
68
|
export { Gloss } from "./Gloss/Gloss";
|
|
70
69
|
export { GlossExample } from "./Gloss/GlossExample";
|
package/lib/index.js
CHANGED
|
@@ -56,7 +56,6 @@ const require_KeyFigure = require('./KeyFigure/KeyFigure.js');
|
|
|
56
56
|
const require_ContactBlock = require('./ContactBlock/ContactBlock.js');
|
|
57
57
|
const require_CampaignBlock = require('./CampaignBlock/CampaignBlock.js');
|
|
58
58
|
const require_Grid = require('./Grid/Grid.js');
|
|
59
|
-
const require_GridParallaxItem = require('./Grid/GridParallaxItem.js');
|
|
60
59
|
const require_LinkBlock = require('./LinkBlock/LinkBlock.js');
|
|
61
60
|
const require_LinkBlockSection = require('./LinkBlock/LinkBlockSection.js');
|
|
62
61
|
const require_ZendeskButton = require('./ZendeskButton/ZendeskButton.js');
|
|
@@ -101,7 +100,6 @@ exports.FootnoteEmbed = require_FootnoteEmbed.FootnoteEmbed;
|
|
|
101
100
|
exports.Gloss = require_Gloss.Gloss;
|
|
102
101
|
exports.GlossExample = require_GlossExample.GlossExample;
|
|
103
102
|
exports.Grid = require_Grid.Grid;
|
|
104
|
-
exports.GridParallaxItem = require_GridParallaxItem.GridParallaxItem;
|
|
105
103
|
exports.H5pEmbed = require_H5pEmbed.H5pEmbed;
|
|
106
104
|
exports.HomeBreadcrumb = require_HomeBreadcrumb.HomeBreadcrumb;
|
|
107
105
|
exports.IframeEmbed = require_IframeEmbed.IframeEmbed;
|
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.162-alpha.0",
|
|
5
5
|
"description": "UI component library for NDLA",
|
|
6
6
|
"license": "GPL-3.0",
|
|
7
7
|
"exports": {
|
|
@@ -37,13 +37,13 @@
|
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@ark-ui/react": "^5.25.0",
|
|
40
|
-
"@ndla/core": "^6.0.
|
|
41
|
-
"@ndla/icons": "^8.0.
|
|
42
|
-
"@ndla/licenses": "^10.0.
|
|
43
|
-
"@ndla/primitives": "^1.0.
|
|
44
|
-
"@ndla/safelink": "^7.0.
|
|
45
|
-
"@ndla/styled-system": "^0.0.
|
|
46
|
-
"@ndla/util": "^5.0.
|
|
40
|
+
"@ndla/core": "^6.0.6-alpha.0",
|
|
41
|
+
"@ndla/icons": "^8.0.75-alpha.0",
|
|
42
|
+
"@ndla/licenses": "^10.0.8-alpha.0",
|
|
43
|
+
"@ndla/primitives": "^1.0.114-alpha.0",
|
|
44
|
+
"@ndla/safelink": "^7.0.117-alpha.0",
|
|
45
|
+
"@ndla/styled-system": "^0.0.46",
|
|
46
|
+
"@ndla/util": "^5.0.17-alpha.0",
|
|
47
47
|
"html-react-parser": "^5.2.8"
|
|
48
48
|
},
|
|
49
49
|
"peerDependencies": {
|
|
@@ -54,13 +54,13 @@
|
|
|
54
54
|
"react-router": ">= 7.0.0"
|
|
55
55
|
},
|
|
56
56
|
"devDependencies": {
|
|
57
|
-
"@ndla/preset-panda": "^0.0.
|
|
57
|
+
"@ndla/preset-panda": "^0.0.68",
|
|
58
58
|
"@ndla/types-backend": "^1.0.82",
|
|
59
59
|
"@ndla/types-embed": "^5.0.19-alpha.0",
|
|
60
|
-
"@pandacss/dev": "^1.
|
|
60
|
+
"@pandacss/dev": "^1.7.0"
|
|
61
61
|
},
|
|
62
62
|
"publishConfig": {
|
|
63
63
|
"access": "public"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "293bd25354ce47346b143126ea47f358c0c4b629"
|
|
66
66
|
}
|
package/src/FileList/File.tsx
CHANGED
|
@@ -70,7 +70,7 @@ export const File = forwardRef<HTMLDivElement, FileProps>(
|
|
|
70
70
|
({ title, url, fileExists, fileType, fileSize, ...rest }, ref) => {
|
|
71
71
|
const { t } = useTranslation();
|
|
72
72
|
const filename = `${title}-${url.split("/").pop() ?? ""}`;
|
|
73
|
-
const downloadUrl = `${url}?download
|
|
73
|
+
const downloadUrl = `${url}?download=true`;
|
|
74
74
|
const tooltip = `${t("download")} ${filename}`;
|
|
75
75
|
|
|
76
76
|
return (
|
|
@@ -78,7 +78,7 @@ export const File = forwardRef<HTMLDivElement, FileProps>(
|
|
|
78
78
|
<InfoContainer>
|
|
79
79
|
<DownloadLine />
|
|
80
80
|
{fileExists ? (
|
|
81
|
-
<StyledSafeLink unstyled css={linkOverlay.raw()} to={downloadUrl} title={tooltip}>
|
|
81
|
+
<StyledSafeLink unstyled download={filename} css={linkOverlay.raw()} to={downloadUrl} title={tooltip}>
|
|
82
82
|
{title}
|
|
83
83
|
</StyledSafeLink>
|
|
84
84
|
) : (
|
|
@@ -51,7 +51,7 @@ export const GridKeyPerformanceStory: StoryFn<typeof Grid> = ({ ...args }) => {
|
|
|
51
51
|
const items = new Array(columns).fill(0).map((_, idx) => {
|
|
52
52
|
const args = keyFigureArgs[idx % keyFigureArgs.length];
|
|
53
53
|
return (
|
|
54
|
-
<div key={idx} data-type="grid-cell"
|
|
54
|
+
<div key={idx} data-type="grid-cell">
|
|
55
55
|
<Plain key={idx} {...args} />
|
|
56
56
|
</div>
|
|
57
57
|
);
|
|
@@ -62,7 +62,7 @@ export const GridKeyPerformanceStory: StoryFn<typeof Grid> = ({ ...args }) => {
|
|
|
62
62
|
export const GridPitchStory: StoryFn<typeof Grid> = ({ ...args }) => {
|
|
63
63
|
const columns = args.columns === "2x2" ? 4 : parseInt(args.columns);
|
|
64
64
|
const items = new Array(columns).fill(
|
|
65
|
-
<div data-type="grid-cell"
|
|
65
|
+
<div data-type="grid-cell">
|
|
66
66
|
<PitchStory
|
|
67
67
|
// eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
|
|
68
68
|
metaImage={PitchStory.args?.metaImage!}
|
package/src/Grid/Grid.tsx
CHANGED
|
@@ -21,7 +21,7 @@ const GridContainer = styled("div", {
|
|
|
21
21
|
minWidth: "surface.xxsmall",
|
|
22
22
|
gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
|
|
23
23
|
|
|
24
|
-
"&
|
|
24
|
+
"& div[data-embed-type='pitch']": {
|
|
25
25
|
height: "100%",
|
|
26
26
|
"& > :last-child": {
|
|
27
27
|
marginTop: "auto",
|
|
@@ -44,10 +44,10 @@ export default {
|
|
|
44
44
|
export const Default = ({ ...args }: Props) => {
|
|
45
45
|
return (
|
|
46
46
|
<Grid columns="2" background="transparent">
|
|
47
|
-
<div data-type="grid-cell"
|
|
47
|
+
<div data-type="grid-cell">
|
|
48
48
|
<Pitch {...args} />
|
|
49
49
|
</div>
|
|
50
|
-
<div data-type="grid-cell"
|
|
50
|
+
<div data-type="grid-cell">
|
|
51
51
|
<Pitch {...args} description="Kortere beskrivelse" />
|
|
52
52
|
</div>
|
|
53
53
|
</Grid>
|
package/src/index.ts
CHANGED
|
@@ -110,7 +110,6 @@ export { ContactBlock, contactBlockBackgrounds } from "./ContactBlock/ContactBlo
|
|
|
110
110
|
export type { ContactBlockBackground } from "./ContactBlock/ContactBlock";
|
|
111
111
|
export { CampaignBlock } from "./CampaignBlock/CampaignBlock";
|
|
112
112
|
export { Grid } from "./Grid/Grid";
|
|
113
|
-
export { GridParallaxItem } from "./Grid/GridParallaxItem";
|
|
114
113
|
export type { GridProps as GridType } from "./Grid/Grid";
|
|
115
114
|
|
|
116
115
|
export { Gloss } from "./Gloss/Gloss";
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import "react";
|
|
2
|
-
import { styled } from "@ndla/styled-system/jsx";
|
|
3
|
-
import { jsx } from "react/jsx-runtime";
|
|
4
|
-
|
|
5
|
-
//#region src/Grid/GridParallaxItem.tsx
|
|
6
|
-
const StyledGridParallaxItem = styled("div", { base: {
|
|
7
|
-
position: "relative",
|
|
8
|
-
"& > div": {
|
|
9
|
-
top: "var(--masthead-height, 0px)",
|
|
10
|
-
position: "sticky"
|
|
11
|
-
}
|
|
12
|
-
} });
|
|
13
|
-
const GridParallaxItem = ({ children, ...rest }) => /* @__PURE__ */ jsx(StyledGridParallaxItem, {
|
|
14
|
-
...rest,
|
|
15
|
-
"data-embed-type": "grid-parallax",
|
|
16
|
-
children: /* @__PURE__ */ jsx("div", { children })
|
|
17
|
-
});
|
|
18
|
-
|
|
19
|
-
//#endregion
|
|
20
|
-
export { GridParallaxItem };
|
|
21
|
-
//# sourceMappingURL=GridParallaxItem.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"GridParallaxItem.mjs","names":[],"sources":["../../src/Grid/GridParallaxItem.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-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 HTMLAttributes } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst StyledGridParallaxItem = styled(\"div\", {\n base: {\n position: \"relative\",\n \"& > div\": {\n top: \"var(--masthead-height, 0px)\",\n position: \"sticky\",\n },\n },\n});\n\nexport const GridParallaxItem = ({ children, ...rest }: HTMLAttributes<HTMLDivElement>) => (\n <StyledGridParallaxItem {...rest} data-embed-type=\"grid-parallax\">\n <div>{children}</div>\n </StyledGridParallaxItem>\n);\n"],"mappings":";;;;;AAWA,MAAM,yBAAyB,OAAO,OAAO,EAC3C,MAAM;CACJ,UAAU;CACV,WAAW;EACT,KAAK;EACL,UAAU;EACX;CACF,EACF,CAAC;AAEF,MAAa,oBAAoB,EAAE,UAAU,GAAG,WAC9C,oBAAC;CAAuB,GAAI;CAAM,mBAAgB;WAChD,oBAAC,SAAK,WAAe;EACE"}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2024-present, NDLA.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
import { type HTMLAttributes } from "react";
|
|
9
|
-
export declare const GridParallaxItem: ({ children, ...rest }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
let react = require("react");
|
|
3
|
-
let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
|
|
4
|
-
let react_jsx_runtime = require("react/jsx-runtime");
|
|
5
|
-
|
|
6
|
-
//#region src/Grid/GridParallaxItem.tsx
|
|
7
|
-
/**
|
|
8
|
-
* Copyright (c) 2024-present, NDLA.
|
|
9
|
-
*
|
|
10
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
11
|
-
* LICENSE file in the root directory of this source tree.
|
|
12
|
-
*
|
|
13
|
-
*/
|
|
14
|
-
const StyledGridParallaxItem = (0, __ndla_styled_system_jsx.styled)("div", { base: {
|
|
15
|
-
position: "relative",
|
|
16
|
-
"& > div": {
|
|
17
|
-
top: "var(--masthead-height, 0px)",
|
|
18
|
-
position: "sticky"
|
|
19
|
-
}
|
|
20
|
-
} });
|
|
21
|
-
const GridParallaxItem = ({ children, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledGridParallaxItem, {
|
|
22
|
-
...rest,
|
|
23
|
-
"data-embed-type": "grid-parallax",
|
|
24
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children })
|
|
25
|
-
});
|
|
26
|
-
|
|
27
|
-
//#endregion
|
|
28
|
-
exports.GridParallaxItem = GridParallaxItem;
|
|
29
|
-
//# sourceMappingURL=GridParallaxItem.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"GridParallaxItem.js","names":[],"sources":["../../src/Grid/GridParallaxItem.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-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 HTMLAttributes } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst StyledGridParallaxItem = styled(\"div\", {\n base: {\n position: \"relative\",\n \"& > div\": {\n top: \"var(--masthead-height, 0px)\",\n position: \"sticky\",\n },\n },\n});\n\nexport const GridParallaxItem = ({ children, ...rest }: HTMLAttributes<HTMLDivElement>) => (\n <StyledGridParallaxItem {...rest} data-embed-type=\"grid-parallax\">\n <div>{children}</div>\n </StyledGridParallaxItem>\n);\n"],"mappings":";;;;;;;;;;;;;AAWA,MAAM,8DAAgC,OAAO,EAC3C,MAAM;CACJ,UAAU;CACV,WAAW;EACT,KAAK;EACL,UAAU;EACX;CACF,EACF,CAAC;AAEF,MAAa,oBAAoB,EAAE,UAAU,GAAG,WAC9C,2CAAC;CAAuB,GAAI;CAAM,mBAAgB;WAChD,2CAAC,SAAK,WAAe;EACE"}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2024-present, NDLA.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
import { type HTMLAttributes } from "react";
|
|
10
|
-
import { styled } from "@ndla/styled-system/jsx";
|
|
11
|
-
|
|
12
|
-
const StyledGridParallaxItem = styled("div", {
|
|
13
|
-
base: {
|
|
14
|
-
position: "relative",
|
|
15
|
-
"& > div": {
|
|
16
|
-
top: "var(--masthead-height, 0px)",
|
|
17
|
-
position: "sticky",
|
|
18
|
-
},
|
|
19
|
-
},
|
|
20
|
-
});
|
|
21
|
-
|
|
22
|
-
export const GridParallaxItem = ({ children, ...rest }: HTMLAttributes<HTMLDivElement>) => (
|
|
23
|
-
<StyledGridParallaxItem {...rest} data-embed-type="grid-parallax">
|
|
24
|
-
<div>{children}</div>
|
|
25
|
-
</StyledGridParallaxItem>
|
|
26
|
-
);
|