@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.
Files changed (192) hide show
  1. package/dist/all-aout.js +0 -0
  2. package/dist/all.css +1 -0
  3. package/dist/panda.buildinfo.json +170 -0
  4. package/dist/styles.css +686 -0
  5. package/es/Article/Article.js +3 -4
  6. package/es/Article/ArticleByline.js +9 -9
  7. package/es/Article/ArticleFootNotes.js +4 -4
  8. package/es/AudioPlayer/AudioPlayer.js +142 -163
  9. package/es/AudioPlayer/Controls.js +187 -203
  10. package/es/AudioPlayer/SpeechControl.js +13 -11
  11. package/es/BlogPost/BlogPost.js +85 -23
  12. package/es/CampaignBlock/CampaignBlock.js +3 -4
  13. package/es/CodeBlock/CodeBlock.js +88 -96
  14. package/es/ContactBlock/ContactBlock.js +54 -40
  15. package/es/ContentLoader/index.js +7 -7
  16. package/es/CopyParagraphButton/CopyParagraphButton.js +4 -4
  17. package/es/Embed/AudioEmbed.js +5 -9
  18. package/es/Embed/BrightcoveEmbed.js +12 -15
  19. package/es/Embed/CodeEmbed.js +58 -10
  20. package/es/Embed/ConceptEmbed.js +15 -20
  21. package/es/Embed/ContentLinkEmbed.js +1 -1
  22. package/es/Embed/EmbedErrorPlaceholder.js +32 -17
  23. package/es/Embed/ExternalEmbed.js +7 -10
  24. package/es/Embed/FootnoteEmbed.js +3 -3
  25. package/es/Embed/H5pEmbed.js +1 -2
  26. package/es/Embed/IframeEmbed.js +8 -9
  27. package/es/Embed/ImageEmbed.js +167 -122
  28. package/es/Embed/RelatedContentEmbed.js +8 -10
  29. package/es/Embed/UuDisclaimerEmbed.js +2 -2
  30. package/es/Embed/conceptComponents.js +9 -9
  31. package/es/ErrorMessage/ErrorMessage.js +1 -1
  32. package/es/FactBox/FactBox.js +2 -2
  33. package/es/FileList/File.js +1 -1
  34. package/es/FileList/Format.js +3 -3
  35. package/es/FrontpageArticle/FrontpageArticle.js +1 -1
  36. package/es/Gloss/Gloss.js +9 -11
  37. package/es/Gloss/GlossExample.js +3 -4
  38. package/es/Grid/Grid.js +1 -1
  39. package/es/Image/Image.js +7 -8
  40. package/es/Image/ImageLink.js +1 -1
  41. package/es/KeyFigure/KeyFigure.js +2 -2
  42. package/es/LanguageSelector/LanguageSelector.js +2 -2
  43. package/es/LetterFilter/LetterFilter.js +1 -1
  44. package/es/LicenseByline/EmbedByline.js +5 -6
  45. package/es/LicenseByline/LicenseDescription.js +1 -1
  46. package/es/LicenseByline/LicenseLink.js +1 -2
  47. package/es/Messages/MessageBox.js +1 -1
  48. package/es/Notion/Notion.js +2 -2
  49. package/es/Notion/NotionImage.js +12 -57
  50. package/es/RelatedArticleList/RelatedArticleList.js +3 -3
  51. package/es/ResourceBox/ResourceBox.js +12 -17
  52. package/es/Search/ActiveFilters.js +1 -1
  53. package/es/Search/ContentTypeResult.js +9 -6
  54. package/es/Search/ContentTypeResultStyles.js +1 -1
  55. package/es/Search/IsPathToHighlight.js +1 -1
  56. package/es/Search/SearchField.js +6 -8
  57. package/es/Search/SearchResult.js +14 -19
  58. package/es/Search/SearchResultSleeve.js +14 -16
  59. package/es/SnackBar/SnackbarProvider.js +8 -11
  60. package/es/TagSelector/TagSelector.js +1 -1
  61. package/es/TagSelector/ariaMessages.js +6 -6
  62. package/es/TreeStructure/AddFolderButton.js +4 -6
  63. package/es/TreeStructure/ComboboxButton.js +4 -7
  64. package/es/TreeStructure/FolderItem.js +12 -15
  65. package/es/TreeStructure/FolderItems.js +3 -3
  66. package/es/TreeStructure/TreeStructure.js +9 -12
  67. package/es/TreeStructure/helperFunctions.js +1 -1
  68. package/es/ZendeskButton/ZendeskButton.js +55 -0
  69. package/es/i18n/formatNestedMessages.js +1 -1
  70. package/es/index.js +2 -1
  71. package/es/locale/messages-en.js +9 -8
  72. package/es/locale/messages-nb.js +9 -8
  73. package/es/locale/messages-nn.js +9 -8
  74. package/es/locale/messages-se.js +9 -8
  75. package/es/locale/messages-sma.js +9 -8
  76. package/es/styles.css +686 -0
  77. package/es/utils/relativeUrl.js +3 -3
  78. package/lib/Article/Article.js +3 -4
  79. package/lib/Article/ArticleByline.js +9 -9
  80. package/lib/Article/ArticleFootNotes.js +4 -4
  81. package/lib/AudioPlayer/AudioPlayer.d.ts +1 -2
  82. package/lib/AudioPlayer/AudioPlayer.js +142 -162
  83. package/lib/AudioPlayer/Controls.js +190 -205
  84. package/lib/AudioPlayer/SpeechControl.js +13 -11
  85. package/lib/BlogPost/BlogPost.d.ts +2 -2
  86. package/lib/BlogPost/BlogPost.js +85 -24
  87. package/lib/CampaignBlock/CampaignBlock.js +3 -4
  88. package/lib/CodeBlock/CodeBlock.d.ts +5 -8
  89. package/lib/CodeBlock/CodeBlock.js +88 -96
  90. package/lib/ContactBlock/ContactBlock.js +55 -43
  91. package/lib/ContentLoader/index.js +7 -7
  92. package/lib/CopyParagraphButton/CopyParagraphButton.js +4 -4
  93. package/lib/Embed/AudioEmbed.js +5 -9
  94. package/lib/Embed/BrightcoveEmbed.js +12 -15
  95. package/lib/Embed/CodeEmbed.js +56 -8
  96. package/lib/Embed/ConceptEmbed.js +15 -20
  97. package/lib/Embed/ContentLinkEmbed.js +1 -1
  98. package/lib/Embed/EmbedErrorPlaceholder.d.ts +4 -3
  99. package/lib/Embed/EmbedErrorPlaceholder.js +32 -18
  100. package/lib/Embed/ExternalEmbed.js +7 -10
  101. package/lib/Embed/FootnoteEmbed.js +3 -3
  102. package/lib/Embed/H5pEmbed.js +1 -2
  103. package/lib/Embed/IframeEmbed.js +8 -9
  104. package/lib/Embed/ImageEmbed.d.ts +1 -2
  105. package/lib/Embed/ImageEmbed.js +167 -123
  106. package/lib/Embed/RelatedContentEmbed.js +8 -10
  107. package/lib/Embed/UuDisclaimerEmbed.js +2 -2
  108. package/lib/Embed/conceptComponents.js +9 -9
  109. package/lib/ErrorMessage/ErrorMessage.js +1 -1
  110. package/lib/FactBox/FactBox.js +2 -2
  111. package/lib/FileList/File.js +1 -1
  112. package/lib/FileList/Format.js +3 -3
  113. package/lib/FrontpageArticle/FrontpageArticle.js +1 -1
  114. package/lib/Gloss/Gloss.js +9 -11
  115. package/lib/Gloss/GlossExample.js +3 -4
  116. package/lib/Grid/Grid.js +1 -1
  117. package/lib/Image/Image.js +7 -8
  118. package/lib/Image/ImageLink.js +1 -1
  119. package/lib/KeyFigure/KeyFigure.js +2 -2
  120. package/lib/LanguageSelector/LanguageSelector.js +2 -2
  121. package/lib/LetterFilter/LetterFilter.js +1 -1
  122. package/lib/LicenseByline/EmbedByline.js +5 -6
  123. package/lib/LicenseByline/LicenseDescription.js +1 -1
  124. package/lib/LicenseByline/LicenseLink.js +1 -2
  125. package/lib/Messages/MessageBox.js +1 -1
  126. package/lib/Notion/Notion.js +2 -2
  127. package/lib/Notion/NotionImage.d.ts +1 -11
  128. package/lib/Notion/NotionImage.js +12 -59
  129. package/lib/RelatedArticleList/RelatedArticleList.js +3 -3
  130. package/lib/ResourceBox/ResourceBox.js +13 -18
  131. package/lib/Search/ActiveFilters.js +1 -1
  132. package/lib/Search/ContentTypeResult.js +9 -6
  133. package/lib/Search/ContentTypeResultStyles.js +1 -1
  134. package/lib/Search/IsPathToHighlight.js +1 -1
  135. package/lib/Search/SearchField.js +6 -8
  136. package/lib/Search/SearchResult.js +14 -19
  137. package/lib/Search/SearchResultSleeve.js +14 -16
  138. package/lib/SnackBar/SnackbarProvider.js +8 -11
  139. package/lib/TagSelector/TagSelector.js +1 -1
  140. package/lib/TagSelector/ariaMessages.js +6 -6
  141. package/lib/TreeStructure/AddFolderButton.js +4 -6
  142. package/lib/TreeStructure/ComboboxButton.js +4 -7
  143. package/lib/TreeStructure/FolderItem.js +12 -15
  144. package/lib/TreeStructure/FolderItems.js +3 -3
  145. package/lib/TreeStructure/TreeStructure.js +9 -12
  146. package/lib/TreeStructure/helperFunctions.js +1 -1
  147. package/lib/ZendeskButton/ZendeskButton.d.ts +19 -0
  148. package/lib/ZendeskButton/ZendeskButton.js +61 -0
  149. package/lib/i18n/formatNestedMessages.js +1 -1
  150. package/lib/index.d.ts +2 -0
  151. package/lib/index.js +7 -0
  152. package/lib/locale/messages-en.d.ts +1 -0
  153. package/lib/locale/messages-en.js +9 -8
  154. package/lib/locale/messages-nb.d.ts +1 -0
  155. package/lib/locale/messages-nb.js +9 -8
  156. package/lib/locale/messages-nn.d.ts +1 -0
  157. package/lib/locale/messages-nn.js +9 -8
  158. package/lib/locale/messages-se.d.ts +1 -0
  159. package/lib/locale/messages-se.js +9 -8
  160. package/lib/locale/messages-sma.d.ts +1 -0
  161. package/lib/locale/messages-sma.js +9 -8
  162. package/lib/styles.css +686 -0
  163. package/lib/types.d.ts +1 -0
  164. package/lib/utils/relativeUrl.js +3 -3
  165. package/package.json +17 -12
  166. package/src/AudioPlayer/AudioPlayer.tsx +139 -176
  167. package/src/AudioPlayer/Controls.tsx +210 -250
  168. package/src/AudioPlayer/SpeechControl.tsx +9 -7
  169. package/src/BlogPost/BlogPost.tsx +82 -58
  170. package/src/CodeBlock/CodeBlock.stories.tsx +0 -43
  171. package/src/CodeBlock/CodeBlock.tsx +91 -202
  172. package/src/ContactBlock/ContactBlock.tsx +10 -2
  173. package/src/Embed/CodeEmbed.stories.tsx +95 -0
  174. package/src/Embed/CodeEmbed.tsx +62 -7
  175. package/src/Embed/ConceptEmbed.tsx +1 -9
  176. package/src/Embed/EmbedErrorPlaceholder.tsx +31 -28
  177. package/src/Embed/ImageEmbed.stories.tsx +53 -11
  178. package/src/Embed/ImageEmbed.tsx +162 -166
  179. package/src/Notion/NotionImage.tsx +4 -54
  180. package/src/ResourceBox/ResourceBox.tsx +3 -15
  181. package/src/Search/ContentTypeResult.tsx +9 -3
  182. package/src/Search/SearchResultSleeve.tsx +5 -2
  183. package/src/ZendeskButton/ZendeskButton.tsx +58 -0
  184. package/src/index.ts +4 -0
  185. package/src/locale/messages-en.ts +1 -0
  186. package/src/locale/messages-nb.ts +1 -0
  187. package/src/locale/messages-nn.ts +1 -0
  188. package/src/locale/messages-se.ts +1 -0
  189. package/src/locale/messages-sma.ts +1 -0
  190. package/src/types.ts +2 -0
  191. package/src/Image/__tests__/Image-test.tsx +0 -66
  192. 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
+ }