@ndla/ui 55.0.12-alpha.0 → 55.0.13-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/all-aout.js +0 -0
- package/dist/all.css +1 -0
- package/dist/panda.buildinfo.json +170 -0
- package/dist/styles.css +686 -0
- package/es/Article/Article.js +3 -4
- package/es/Article/ArticleByline.js +9 -9
- package/es/Article/ArticleFootNotes.js +4 -4
- package/es/AudioPlayer/AudioPlayer.js +142 -163
- package/es/AudioPlayer/Controls.js +187 -203
- package/es/AudioPlayer/SpeechControl.js +13 -11
- package/es/BlogPost/BlogPost.js +85 -23
- package/es/CampaignBlock/CampaignBlock.js +3 -4
- package/es/CodeBlock/CodeBlock.js +88 -96
- package/es/ContactBlock/ContactBlock.js +54 -40
- package/es/ContentLoader/index.js +7 -7
- package/es/CopyParagraphButton/CopyParagraphButton.js +4 -4
- package/es/Embed/AudioEmbed.js +5 -9
- package/es/Embed/BrightcoveEmbed.js +12 -15
- package/es/Embed/CodeEmbed.js +58 -10
- package/es/Embed/ConceptEmbed.js +15 -20
- package/es/Embed/ContentLinkEmbed.js +1 -1
- package/es/Embed/EmbedErrorPlaceholder.js +32 -17
- package/es/Embed/ExternalEmbed.js +7 -10
- package/es/Embed/FootnoteEmbed.js +3 -3
- package/es/Embed/H5pEmbed.js +1 -2
- package/es/Embed/IframeEmbed.js +8 -9
- package/es/Embed/ImageEmbed.js +167 -122
- package/es/Embed/RelatedContentEmbed.js +8 -10
- package/es/Embed/UuDisclaimerEmbed.js +2 -2
- package/es/Embed/conceptComponents.js +9 -9
- package/es/ErrorMessage/ErrorMessage.js +1 -1
- package/es/FactBox/FactBox.js +2 -2
- package/es/FileList/File.js +1 -1
- package/es/FileList/Format.js +3 -3
- package/es/FrontpageArticle/FrontpageArticle.js +1 -1
- package/es/Gloss/Gloss.js +9 -11
- package/es/Gloss/GlossExample.js +3 -4
- package/es/Grid/Grid.js +1 -1
- package/es/Image/Image.js +7 -8
- package/es/Image/ImageLink.js +1 -1
- package/es/KeyFigure/KeyFigure.js +2 -2
- package/es/LanguageSelector/LanguageSelector.js +2 -2
- package/es/LetterFilter/LetterFilter.js +1 -1
- package/es/LicenseByline/EmbedByline.js +5 -6
- package/es/LicenseByline/LicenseDescription.js +1 -1
- package/es/LicenseByline/LicenseLink.js +1 -2
- package/es/Messages/MessageBox.js +1 -1
- package/es/Notion/Notion.js +2 -2
- package/es/Notion/NotionImage.js +12 -57
- package/es/RelatedArticleList/RelatedArticleList.js +3 -3
- package/es/ResourceBox/ResourceBox.js +12 -17
- package/es/Search/ActiveFilters.js +1 -1
- package/es/Search/ContentTypeResult.js +9 -6
- package/es/Search/ContentTypeResultStyles.js +1 -1
- package/es/Search/IsPathToHighlight.js +1 -1
- package/es/Search/SearchField.js +6 -8
- package/es/Search/SearchResult.js +14 -19
- package/es/Search/SearchResultSleeve.js +14 -16
- package/es/SnackBar/SnackbarProvider.js +8 -11
- package/es/TagSelector/TagSelector.js +1 -1
- package/es/TagSelector/ariaMessages.js +6 -6
- package/es/TreeStructure/AddFolderButton.js +4 -6
- package/es/TreeStructure/ComboboxButton.js +4 -7
- package/es/TreeStructure/FolderItem.js +12 -15
- package/es/TreeStructure/FolderItems.js +3 -3
- package/es/TreeStructure/TreeStructure.js +9 -12
- package/es/TreeStructure/helperFunctions.js +1 -1
- package/es/ZendeskButton/ZendeskButton.js +55 -0
- package/es/i18n/formatNestedMessages.js +1 -1
- package/es/index.js +2 -1
- package/es/locale/messages-en.js +9 -8
- package/es/locale/messages-nb.js +9 -8
- package/es/locale/messages-nn.js +9 -8
- package/es/locale/messages-se.js +9 -8
- package/es/locale/messages-sma.js +9 -8
- package/es/styles.css +686 -0
- package/es/utils/relativeUrl.js +3 -3
- package/lib/Article/Article.js +3 -4
- package/lib/Article/ArticleByline.js +9 -9
- package/lib/Article/ArticleFootNotes.js +4 -4
- package/lib/AudioPlayer/AudioPlayer.d.ts +1 -2
- package/lib/AudioPlayer/AudioPlayer.js +142 -162
- package/lib/AudioPlayer/Controls.js +190 -205
- package/lib/AudioPlayer/SpeechControl.js +13 -11
- package/lib/BlogPost/BlogPost.d.ts +2 -2
- package/lib/BlogPost/BlogPost.js +85 -24
- package/lib/CampaignBlock/CampaignBlock.js +3 -4
- package/lib/CodeBlock/CodeBlock.d.ts +5 -8
- package/lib/CodeBlock/CodeBlock.js +88 -96
- package/lib/ContactBlock/ContactBlock.js +55 -43
- package/lib/ContentLoader/index.js +7 -7
- package/lib/CopyParagraphButton/CopyParagraphButton.js +4 -4
- package/lib/Embed/AudioEmbed.js +5 -9
- package/lib/Embed/BrightcoveEmbed.js +12 -15
- package/lib/Embed/CodeEmbed.js +56 -8
- package/lib/Embed/ConceptEmbed.js +15 -20
- package/lib/Embed/ContentLinkEmbed.js +1 -1
- package/lib/Embed/EmbedErrorPlaceholder.d.ts +4 -3
- package/lib/Embed/EmbedErrorPlaceholder.js +32 -18
- package/lib/Embed/ExternalEmbed.js +7 -10
- package/lib/Embed/FootnoteEmbed.js +3 -3
- package/lib/Embed/H5pEmbed.js +1 -2
- package/lib/Embed/IframeEmbed.js +8 -9
- package/lib/Embed/ImageEmbed.d.ts +1 -2
- package/lib/Embed/ImageEmbed.js +167 -123
- package/lib/Embed/RelatedContentEmbed.js +8 -10
- package/lib/Embed/UuDisclaimerEmbed.js +2 -2
- package/lib/Embed/conceptComponents.js +9 -9
- package/lib/ErrorMessage/ErrorMessage.js +1 -1
- package/lib/FactBox/FactBox.js +2 -2
- package/lib/FileList/File.js +1 -1
- package/lib/FileList/Format.js +3 -3
- package/lib/FrontpageArticle/FrontpageArticle.js +1 -1
- package/lib/Gloss/Gloss.js +9 -11
- package/lib/Gloss/GlossExample.js +3 -4
- package/lib/Grid/Grid.js +1 -1
- package/lib/Image/Image.js +7 -8
- package/lib/Image/ImageLink.js +1 -1
- package/lib/KeyFigure/KeyFigure.js +2 -2
- package/lib/LanguageSelector/LanguageSelector.js +2 -2
- package/lib/LetterFilter/LetterFilter.js +1 -1
- package/lib/LicenseByline/EmbedByline.js +5 -6
- package/lib/LicenseByline/LicenseDescription.js +1 -1
- package/lib/LicenseByline/LicenseLink.js +1 -2
- package/lib/Messages/MessageBox.js +1 -1
- package/lib/Notion/Notion.js +2 -2
- package/lib/Notion/NotionImage.d.ts +1 -11
- package/lib/Notion/NotionImage.js +12 -59
- package/lib/RelatedArticleList/RelatedArticleList.js +3 -3
- package/lib/ResourceBox/ResourceBox.js +13 -18
- package/lib/Search/ActiveFilters.js +1 -1
- package/lib/Search/ContentTypeResult.js +9 -6
- package/lib/Search/ContentTypeResultStyles.js +1 -1
- package/lib/Search/IsPathToHighlight.js +1 -1
- package/lib/Search/SearchField.js +6 -8
- package/lib/Search/SearchResult.js +14 -19
- package/lib/Search/SearchResultSleeve.js +14 -16
- package/lib/SnackBar/SnackbarProvider.js +8 -11
- package/lib/TagSelector/TagSelector.js +1 -1
- package/lib/TagSelector/ariaMessages.js +6 -6
- package/lib/TreeStructure/AddFolderButton.js +4 -6
- package/lib/TreeStructure/ComboboxButton.js +4 -7
- package/lib/TreeStructure/FolderItem.js +12 -15
- package/lib/TreeStructure/FolderItems.js +3 -3
- package/lib/TreeStructure/TreeStructure.js +9 -12
- package/lib/TreeStructure/helperFunctions.js +1 -1
- package/lib/ZendeskButton/ZendeskButton.d.ts +19 -0
- package/lib/ZendeskButton/ZendeskButton.js +61 -0
- package/lib/i18n/formatNestedMessages.js +1 -1
- package/lib/index.d.ts +2 -0
- package/lib/index.js +7 -0
- package/lib/locale/messages-en.d.ts +1 -0
- package/lib/locale/messages-en.js +9 -8
- package/lib/locale/messages-nb.d.ts +1 -0
- package/lib/locale/messages-nb.js +9 -8
- package/lib/locale/messages-nn.d.ts +1 -0
- package/lib/locale/messages-nn.js +9 -8
- package/lib/locale/messages-se.d.ts +1 -0
- package/lib/locale/messages-se.js +9 -8
- package/lib/locale/messages-sma.d.ts +1 -0
- package/lib/locale/messages-sma.js +9 -8
- package/lib/styles.css +686 -0
- package/lib/types.d.ts +1 -0
- package/lib/utils/relativeUrl.js +3 -3
- package/package.json +17 -12
- package/src/AudioPlayer/AudioPlayer.tsx +139 -176
- package/src/AudioPlayer/Controls.tsx +210 -250
- package/src/AudioPlayer/SpeechControl.tsx +9 -7
- package/src/BlogPost/BlogPost.tsx +82 -58
- package/src/CodeBlock/CodeBlock.stories.tsx +0 -43
- package/src/CodeBlock/CodeBlock.tsx +91 -202
- package/src/ContactBlock/ContactBlock.tsx +10 -2
- package/src/Embed/CodeEmbed.stories.tsx +95 -0
- package/src/Embed/CodeEmbed.tsx +62 -7
- package/src/Embed/ConceptEmbed.tsx +1 -9
- package/src/Embed/EmbedErrorPlaceholder.tsx +31 -28
- package/src/Embed/ImageEmbed.stories.tsx +53 -11
- package/src/Embed/ImageEmbed.tsx +162 -166
- package/src/Notion/NotionImage.tsx +4 -54
- package/src/ResourceBox/ResourceBox.tsx +3 -15
- package/src/Search/ContentTypeResult.tsx +9 -3
- package/src/Search/SearchResultSleeve.tsx +5 -2
- package/src/ZendeskButton/ZendeskButton.tsx +58 -0
- package/src/index.ts +4 -0
- package/src/locale/messages-en.ts +1 -0
- package/src/locale/messages-nb.ts +1 -0
- package/src/locale/messages-nn.ts +1 -0
- package/src/locale/messages-se.ts +1 -0
- package/src/locale/messages-sma.ts +1 -0
- package/src/types.ts +2 -0
- package/src/Image/__tests__/Image-test.tsx +0 -66
- package/src/Image/__tests__/__snapshots__/Image-test.tsx.snap +0 -194
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "0.42.0",
|
|
3
|
+
"styles": {
|
|
4
|
+
"atomic": [
|
|
5
|
+
"border]___[value:1px solid",
|
|
6
|
+
"borderColor]___[value:stroke.default",
|
|
7
|
+
"borderRadius]___[value:xsmall",
|
|
8
|
+
"boxShadow]___[value:full",
|
|
9
|
+
"overflow]___[value:hidden",
|
|
10
|
+
"display]___[value:flex",
|
|
11
|
+
"display]___[value:block]___[cond:tabletWideDown",
|
|
12
|
+
"alignItems]___[value:center",
|
|
13
|
+
"flex]___[value:1 0 auto",
|
|
14
|
+
"width]___[value:surface.4xsmall",
|
|
15
|
+
"height]___[value:surface.4xsmall",
|
|
16
|
+
"width]___[value:100%]___[cond:& img",
|
|
17
|
+
"height]___[value:100%]___[cond:& img",
|
|
18
|
+
"objectFit]___[value:cover]___[cond:& img",
|
|
19
|
+
"width]___[value:260px]___[cond:desktop",
|
|
20
|
+
"height]___[value:260px]___[cond:desktop",
|
|
21
|
+
"maxHeight]___[value:surface.small]___[cond:tabletWideDown",
|
|
22
|
+
"maxWidth]___[value:100%]___[cond:tabletWideDown",
|
|
23
|
+
"width]___[value:100%]___[cond:tabletWideDown",
|
|
24
|
+
"height]___[value:auto]___[cond:tabletWideDown",
|
|
25
|
+
"alignItems]___[value:flex-start",
|
|
26
|
+
"flexDirection]___[value:column",
|
|
27
|
+
"gap]___[value:xsmall",
|
|
28
|
+
"padding]___[value:xsmall",
|
|
29
|
+
"width]___[value:100%",
|
|
30
|
+
"paddingBlock]___[value:xsmall]___[cond:&[data-has-image='true']<___>tablet",
|
|
31
|
+
"paddingInline]___[value:medium]___[cond:&[data-has-image='true']<___>tablet",
|
|
32
|
+
"width]___[value:100%]___[cond:tabletWide",
|
|
33
|
+
"flexDirection]___[value:row]___[cond:tabletWide",
|
|
34
|
+
"justifyContent]___[value:space-between]___[cond:tabletWide",
|
|
35
|
+
"borderBlockStart]___[value:1px solid",
|
|
36
|
+
"paddingBlock]___[value:medium",
|
|
37
|
+
"paddingInline]___[value:xsmall",
|
|
38
|
+
"paddingInline]___[value:medium]___[cond:tablet",
|
|
39
|
+
"maxWidth]___[value:surface.xlarge",
|
|
40
|
+
"whiteSpace]___[value:pre-wrap]___[cond:& span > *",
|
|
41
|
+
"alignSelf]___[value:flex-start",
|
|
42
|
+
"borderBottomRadius]___[value:xsmall",
|
|
43
|
+
"justifyContent]___[value:center",
|
|
44
|
+
"background]___[value:background.default",
|
|
45
|
+
"paddingBlock]___[value:xsmall",
|
|
46
|
+
"paddingInline]___[value:medium",
|
|
47
|
+
"display]___[value:grid]___[cond:tabletWideDown",
|
|
48
|
+
"paddingBlock]___[value:xsmall]___[cond:tabletWideDown",
|
|
49
|
+
"paddingInline]___[value:xsmall]___[cond:tabletWideDown",
|
|
50
|
+
"gridTemplateColumns]___[value:1fr repeat(5, auto) 1fr]___[cond:tabletWideDown",
|
|
51
|
+
"gridTemplateAreas]___[value: \"track track track track track track track\" \". speed backwards play forwards volume .\" ]___[cond:tabletWideDown",
|
|
52
|
+
"columnGap]___[value:3xsmall]___[cond:mobileWideDown",
|
|
53
|
+
"gridArea]___[value:play",
|
|
54
|
+
"gridArea]___[value:forwards",
|
|
55
|
+
"gridArea]___[value:backwards",
|
|
56
|
+
"flex]___[value:1",
|
|
57
|
+
"gridArea]___[value:track",
|
|
58
|
+
"paddingInline]___[value:xsmall]___[cond:mobileDown",
|
|
59
|
+
"gridArea]___[value:volume",
|
|
60
|
+
"paddingBlock]___[value:auto",
|
|
61
|
+
"paddingInline]___[value:auto",
|
|
62
|
+
"maxWidth]___[value:xxlarge",
|
|
63
|
+
"maxHeight]___[value:xxlarge",
|
|
64
|
+
"minWidth]___[value:xxlarge",
|
|
65
|
+
"minHeight]___[value:xxlarge",
|
|
66
|
+
"flex]___[value:1]___[cond:& span",
|
|
67
|
+
"gridArea]___[value:speed",
|
|
68
|
+
"height]___[value:surface.3xsmall",
|
|
69
|
+
"srOnly]___[value:true",
|
|
70
|
+
"color]___[value:text.default",
|
|
71
|
+
"backgroundColor]___[value:background.default",
|
|
72
|
+
"gap]___[value:medium",
|
|
73
|
+
"borderColor]___[value:stroke.subtle",
|
|
74
|
+
"transitionDuration]___[value:fast",
|
|
75
|
+
"transitionProperty]___[value:background-color, border-color, max-width",
|
|
76
|
+
"transitionTimingFunction]___[value:default",
|
|
77
|
+
"height]___[value:100%",
|
|
78
|
+
"borderColor]___[value:stroke.hover]___[cond:&:hover, &:focus-visible",
|
|
79
|
+
"backgroundColor]___[value:surface.actionSubtle.hover]___[cond:&:hover, &:focus-visible",
|
|
80
|
+
"textDecoration]___[value:underline]___[cond:&:hover, &:focus-visible<___>& h1, h2, h3, h4, h5, h6",
|
|
81
|
+
"maxWidth]___[value:350px]___[cond:tabletWide",
|
|
82
|
+
"paddingBlock]___[value:xlarge",
|
|
83
|
+
"paddingInline]___[value:xxlarge",
|
|
84
|
+
"maxWidth]___[value:532px]___[cond:tabletWide",
|
|
85
|
+
"textTransform]___[value:uppercase",
|
|
86
|
+
"textStyle]___[value:body.large",
|
|
87
|
+
"objectFit]___[value:cover",
|
|
88
|
+
"border]___[value:0",
|
|
89
|
+
"display]___[value:inline-block",
|
|
90
|
+
"width]___[value:fit-content",
|
|
91
|
+
"position]___[value:relative",
|
|
92
|
+
"maxWidth]___[value:8xl",
|
|
93
|
+
"borderLeft]___[value:4px solid",
|
|
94
|
+
"borderLeftColor]___[value:stroke.default",
|
|
95
|
+
"boxSizing]___[value:border-box",
|
|
96
|
+
"overflowX]___[value:auto",
|
|
97
|
+
"textStyle]___[value:label.medium",
|
|
98
|
+
"fontFamily]___[value:code",
|
|
99
|
+
"display]___[value:block",
|
|
100
|
+
"whiteSpace]___[value:pre",
|
|
101
|
+
"display]___[value:inline-block]___[cond:& .linenumber",
|
|
102
|
+
"paddingBlock]___[value:0]___[cond:& .linenumber",
|
|
103
|
+
"paddingInline]___[value:small]___[cond:& .linenumber",
|
|
104
|
+
"borderRight]___[value:1px solid]___[cond:& .linenumber",
|
|
105
|
+
"borderColor]___[value:stroke.subtle]___[cond:& .linenumber",
|
|
106
|
+
"width]___[value:xxlarge]___[cond:& .linenumber",
|
|
107
|
+
"textAlign]___[value:right]___[cond:& .linenumber",
|
|
108
|
+
"marginInlineEnd]___[value:xsmall]___[cond:& .linenumber",
|
|
109
|
+
"paddingBlockStart]___[value:xsmall]___[cond:& .linenumber[data-first]",
|
|
110
|
+
"paddingBlockEnd]___[value:xsmall]___[cond:& .linenumber[data-last]",
|
|
111
|
+
"color]___[value:#7d8b99]___[cond:& .token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata",
|
|
112
|
+
"color]___[value:#5f6364]___[cond:& .token.punctuation",
|
|
113
|
+
"color]___[value:#c92c2c]___[cond:& .token.property, .token.tag, .token.boolean, .token.number, .token.function-name, .token.constant, .token.symbol, .token.deleted",
|
|
114
|
+
"color]___[value:#2f9c0a]___[cond:& .token.selector, .token.attr-name, .token.string, .token.char, .token.function, .token.builtin, .token.inserted",
|
|
115
|
+
"color]___[value:#a67f59]___[cond:& .token.operator, .token.entity, .token.url, .token.variable",
|
|
116
|
+
"background]___[value:rgba(255, 255, 255, 0.5)]___[cond:& .token.operator, .token.entity, .token.url, .token.variable",
|
|
117
|
+
"color]___[value:#1990b8]___[cond:& .token.atrule, .token.attr-value, .token.keyword, .token.class-name",
|
|
118
|
+
"color]___[value:#e90]___[cond:& .token.regex, .token.important",
|
|
119
|
+
"color]___[value:#a67f59]___[cond:& .language-css .token.string, .style .token.string",
|
|
120
|
+
"background]___[value:rgba(255, 255, 255, 0.5)]___[cond:& .language-css .token.string, .style .token.string",
|
|
121
|
+
"fontWeight]___[value:normal]___[cond:& .token.important",
|
|
122
|
+
"fontWeight]___[value:bold]___[cond:& .token.bold",
|
|
123
|
+
"fontStyle]___[value:italic]___[cond:& .token.italic",
|
|
124
|
+
"cursor]___[value:help]___[cond:& .token.entity",
|
|
125
|
+
"opacity]___[value:0.7]___[cond:& .token.namespace",
|
|
126
|
+
"textStyle]___[value:label.large",
|
|
127
|
+
"fontWeight]___[value:bold",
|
|
128
|
+
"marginBlockStart]___[value:xsmall]___[cond:& > *:not(:where(:first-child))",
|
|
129
|
+
"backgroundColor]___[value:surface.disabled",
|
|
130
|
+
"height]___[value:surface.xsmall",
|
|
131
|
+
"fill]___[value:text.subtle]___[cond:& svg",
|
|
132
|
+
"height]___[value:90%]___[cond:& svg",
|
|
133
|
+
"width]___[value:90%]___[cond:& svg",
|
|
134
|
+
"height]___[value:surface.3xsmall]___[cond:&[data-embed-type='audio']",
|
|
135
|
+
"marginBlockStart]___[value:3xsmall]___[cond:& > *:not(:first-child)",
|
|
136
|
+
"borderColor]___[value:surface.brand.1.strong",
|
|
137
|
+
"borderBottom]___[value:0",
|
|
138
|
+
"borderBottomLeftRadius]___[value:0",
|
|
139
|
+
"borderBottomRightRadius]___[value:0",
|
|
140
|
+
"cursor]___[value:pointer",
|
|
141
|
+
"background]___[value:background.default]___[cond:_hover<___>& [data-byline-button]",
|
|
142
|
+
"transform]___[value:scale(1.2)]___[cond:_hover<___>& button[data-expanded]",
|
|
143
|
+
"transform]___[value:rotate(-45deg)]___[cond:& button[data-expanded='true']<___>& svg",
|
|
144
|
+
"position]___[value:absolute",
|
|
145
|
+
"zIndex]___[value:base",
|
|
146
|
+
"bottom]___[value:0",
|
|
147
|
+
"right]___[value:0",
|
|
148
|
+
"transitionProperty]___[value:transform, background-color, color",
|
|
149
|
+
"transitionDuration]___[value:normal",
|
|
150
|
+
"transitionTimingFunction]___[value:ease-out",
|
|
151
|
+
"background]___[value:background.default/20",
|
|
152
|
+
"transitionProperty]___[value:transform]___[cond:& svg",
|
|
153
|
+
"transitionDuration]___[value:normal]___[cond:& svg",
|
|
154
|
+
"transitionTimingFunction]___[value:ease-out]___[cond:& svg",
|
|
155
|
+
"fill]___[value:primary]___[cond:& svg",
|
|
156
|
+
"padding]___[value:0",
|
|
157
|
+
"top]___[value:xsmall",
|
|
158
|
+
"right]___[value:xsmall",
|
|
159
|
+
"width]___[value:medium",
|
|
160
|
+
"height]___[value:medium",
|
|
161
|
+
"border]___[value:2px solid",
|
|
162
|
+
"borderColor]___[value:background.default",
|
|
163
|
+
"color]___[value:background.default",
|
|
164
|
+
"backgroundColor]___[value:surface.action",
|
|
165
|
+
"borderRadius]___[value:large",
|
|
166
|
+
"0]___[value: max-height: 500vh; "
|
|
167
|
+
],
|
|
168
|
+
"recipes": {}
|
|
169
|
+
}
|
|
170
|
+
}
|