@ndla/preset-panda 0.0.38 → 0.0.40

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 (6) hide show
  1. package/dist/styles.css +28 -11
  2. package/es/globalCss.js +10 -2
  3. package/es/plugins/forwardCssPropPlugin.js +4 -1
  4. package/lib/globalCss.js +10 -2
  5. package/lib/plugins/forwardCssPropPlugin.js +4 -1
  6. package/package.json +2 -2
package/dist/styles.css CHANGED
@@ -116,40 +116,57 @@
116
116
  text-align: center;
117
117
  }
118
118
 
119
+ .ndla-article blockquote {
120
+ letter-spacing: normal;
121
+ font-family: var(--fonts-serif);
122
+ font-weight: var(--font-weights-normal);
123
+ font-size: var(--font-sizes-small);
124
+ line-height: var(--line-heights-small);
125
+ }
126
+
127
+ .ndla-article blockquote:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
128
+ font-size: calc(var(--font-sizes-small) * 1.11);
129
+ line-height: calc(var(--line-heights-small) * 1.11);
130
+ }
131
+
119
132
  .ndla-article p:has(span[dir="rtl"]) {
120
133
  direction: rtl;
121
134
  }
122
135
 
123
- .ndla-article details,.ndla-article :not(li) > blockquote,.ndla-article [data-embed-type="framed-content"],.ndla-article [data-embed-type="factbox"],.ndla-article table,.ndla-article [data-embed-type="related-content-list"],.ndla-article [data-embed-type="link-block-list"],.ndla-article [data-embed-type="blog-post"],.ndla-article [data-embed-type="campaign-block"],.ndla-article [data-embed-type="key-figure"],.ndla-article [data-embed-type="grid"],.ndla-article [data-embed-type="contact-block"],.ndla-article [data-embed-type="file-list"],.ndla-article [data-embed-type="uu-disclaimer"] {
136
+ .ndla-article details,.ndla-article :not(li) > blockquote,.ndla-article [data-embed-type="expandable-box"],.ndla-article [data-embed-type="framed-content"],.ndla-article [data-embed-type="factbox"],.ndla-article table,.ndla-article [data-embed-type="related-content-list"],.ndla-article [data-embed-type="link-block-list"],.ndla-article [data-embed-type="blog-post"],.ndla-article [data-embed-type="campaign-block"],.ndla-article [data-embed-type="key-figure"],.ndla-article [data-embed-type="grid"],.ndla-article [data-embed-type="contact-block"],.ndla-article [data-embed-type="file-list"],.ndla-article [data-embed-type="uu-disclaimer"] {
124
137
  margin-block-start: var(--spacing-xxlarge);
125
138
  margin-block-end: var(--spacing-xxlarge);
126
139
  }
127
140
 
128
- .ndla-article section:not([class]) > :is(h2, [data-embed-type="copy-heading"]),.ndla-article section:not([class]) > div:not([class]) > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="framed-content"] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="grid"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="grid-parallax"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="factbox"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-wrapper] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article details > :is(h2, [data-embed-type="copy-heading"]),.ndla-article blockquote > :is(h2, [data-embed-type="copy-heading"]) {
141
+ .ndla-article section:not([class]) > :is(h2, [data-embed-type="copy-heading"]),.ndla-article section:not([class]) > div:not([class]) > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="framed-content"] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="grid"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="grid-parallax"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="factbox"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-wrapper] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article details > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="expandable-box"] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article blockquote > :is(h2, [data-embed-type="copy-heading"]) {
129
142
  margin-block-start: var(--spacing-xlarge);
130
143
  margin-block-end: var(--spacing-small);
131
144
  }
132
145
 
133
- .ndla-article section:not([class]) > h3,.ndla-article section:not([class]) > div:not([class]) > h3,.ndla-article [data-embed-type="framed-content"] > h3,.ndla-article [data-embed-type="grid"] > div > h3,.ndla-article [data-embed-type="grid-parallax"] > div > h3,.ndla-article [data-embed-type="factbox"] > div > h3,.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > h3,.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > h3,.ndla-article [data-embed-wrapper] > h3,.ndla-article details > h3,.ndla-article blockquote > h3 {
146
+ .ndla-article section:not([class]) > h3,.ndla-article section:not([class]) > div:not([class]) > h3,.ndla-article [data-embed-type="framed-content"] > h3,.ndla-article [data-embed-type="grid"] > div > h3,.ndla-article [data-embed-type="grid-parallax"] > div > h3,.ndla-article [data-embed-type="factbox"] > div > h3,.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > h3,.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > h3,.ndla-article [data-embed-wrapper] > h3,.ndla-article details > h3,.ndla-article [data-embed-type="expandable-box"] > h3,.ndla-article blockquote > h3 {
134
147
  margin-block-start: var(--spacing-large);
135
148
  margin-block-end: var(--spacing-xsmall);
136
149
  }
137
150
 
138
- .ndla-article section:not([class]) > :is(h4, h5, h6),.ndla-article section:not([class]) > div:not([class]) > :is(h4, h5, h6),.ndla-article [data-embed-type="framed-content"] > :is(h4, h5, h6),.ndla-article [data-embed-type="grid"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="grid-parallax"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="factbox"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is(h4, h5, h6),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is(h4, h5, h6),.ndla-article [data-embed-wrapper] > :is(h4, h5, h6),.ndla-article details > :is(h4, h5, h6),.ndla-article blockquote > :is(h4, h5, h6) {
151
+ .ndla-article section:not([class]) > :is(h4, h5, h6),.ndla-article section:not([class]) > div:not([class]) > :is(h4, h5, h6),.ndla-article [data-embed-type="framed-content"] > :is(h4, h5, h6),.ndla-article [data-embed-type="grid"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="grid-parallax"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="factbox"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is(h4, h5, h6),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is(h4, h5, h6),.ndla-article [data-embed-wrapper] > :is(h4, h5, h6),.ndla-article details > :is(h4, h5, h6),.ndla-article [data-embed-type="expandable-box"] > :is(h4, h5, h6),.ndla-article blockquote > :is(h4, h5, h6) {
139
152
  margin-block-start: var(--spacing-medium);
140
153
  margin-block-end: var(--spacing-xsmall);
141
154
  }
142
155
 
143
- .ndla-article section:not([class]) > :is(figure),.ndla-article section:not([class]) > div:not([class]) > :is(figure),.ndla-article [data-embed-type="framed-content"] > :is(figure),.ndla-article [data-embed-type="grid"] > div > :is(figure),.ndla-article [data-embed-type="grid-parallax"] > div > :is(figure),.ndla-article [data-embed-type="factbox"] > div > :is(figure),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is(figure),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is(figure),.ndla-article [data-embed-wrapper] > :is(figure),.ndla-article details > :is(figure),.ndla-article blockquote > :is(figure) {
156
+ .ndla-article section:not([class]) > :is(figure),.ndla-article section:not([class]) > div:not([class]) > :is(figure),.ndla-article [data-embed-type="framed-content"] > :is(figure),.ndla-article [data-embed-type="grid"] > div > :is(figure),.ndla-article [data-embed-type="grid-parallax"] > div > :is(figure),.ndla-article [data-embed-type="factbox"] > div > :is(figure),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is(figure),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is(figure),.ndla-article [data-embed-wrapper] > :is(figure),.ndla-article details > :is(figure),.ndla-article [data-embed-type="expandable-box"] > :is(figure),.ndla-article blockquote > :is(figure) {
144
157
  margin-block-start: var(--spacing-xxlarge);
145
158
  margin-block-end: var(--spacing-xxlarge);
146
159
  }
147
160
 
148
- .ndla-article section:not([class]) > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article section:not([class]) > div:not([class]) > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="framed-content"] > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="grid"] > div > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="grid-parallax"] > div > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="factbox"] > div > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-wrapper] > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article details > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article blockquote > :is(p, ul, ol, dl, [data-embed-type="speech"]) {
161
+ .ndla-article section:not([class]) > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article section:not([class]) > div:not([class]) > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="framed-content"] > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="grid"] > div > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="grid-parallax"] > div > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="factbox"] > div > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-wrapper] > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article details > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="expandable-box"] > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article blockquote > :is(p, ul, ol, dl, [data-embed-type="speech"]) {
149
162
  margin-block-start: var(--spacing-xsmall);
150
163
  margin-block-end: var(--spacing-xsmall);
151
164
  }
152
165
 
166
+ .ndla-article section:not([class]) > :is([data-embed-type="ordered-list"]),.ndla-article section:not([class]) > div:not([class]) > :is([data-embed-type="ordered-list"]),.ndla-article [data-embed-type="framed-content"] > :is([data-embed-type="ordered-list"]),.ndla-article [data-embed-type="grid"] > div > :is([data-embed-type="ordered-list"]),.ndla-article [data-embed-type="grid-parallax"] > div > :is([data-embed-type="ordered-list"]),.ndla-article [data-embed-type="factbox"] > div > :is([data-embed-type="ordered-list"]),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is([data-embed-type="ordered-list"]),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is([data-embed-type="ordered-list"]),.ndla-article [data-embed-wrapper] > :is([data-embed-type="ordered-list"]),.ndla-article details > :is([data-embed-type="ordered-list"]),.ndla-article [data-embed-type="expandable-box"] > :is([data-embed-type="ordered-list"]),.ndla-article blockquote > :is([data-embed-type="ordered-list"]) {
167
+ margin-inline-start: var(--spacing-xlarge) !important;
168
+ }
169
+
153
170
  .ndla-article [data-embed-type="framed-content"] > :first-child,.ndla-article [data-embed-type="grid"] > div > :first-child,.ndla-article [data-embed-type="grid-parallax"] > div > :first-child,.ndla-article [data-embed-type="factbox"] > div > :first-child,.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :first-child,.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :first-child,.ndla-article details > :first-child,.ndla-article blockquote > :first-child {
154
171
  margin-block-start: 0;
155
172
  }
@@ -314,24 +331,24 @@
314
331
  }
315
332
 
316
333
  @media screen and (max-width: 37.56rem) {
317
- .ndla-article details,.ndla-article :not(li) > blockquote,.ndla-article [data-embed-type="framed-content"],.ndla-article [data-embed-type="factbox"],.ndla-article table,.ndla-article [data-embed-type="related-content-list"],.ndla-article [data-embed-type="link-block-list"],.ndla-article [data-embed-type="blog-post"],.ndla-article [data-embed-type="campaign-block"],.ndla-article [data-embed-type="key-figure"],.ndla-article [data-embed-type="grid"],.ndla-article [data-embed-type="contact-block"],.ndla-article [data-embed-type="file-list"],.ndla-article [data-embed-type="uu-disclaimer"] {
334
+ .ndla-article details,.ndla-article :not(li) > blockquote,.ndla-article [data-embed-type="expandable-box"],.ndla-article [data-embed-type="framed-content"],.ndla-article [data-embed-type="factbox"],.ndla-article table,.ndla-article [data-embed-type="related-content-list"],.ndla-article [data-embed-type="link-block-list"],.ndla-article [data-embed-type="blog-post"],.ndla-article [data-embed-type="campaign-block"],.ndla-article [data-embed-type="key-figure"],.ndla-article [data-embed-type="grid"],.ndla-article [data-embed-type="contact-block"],.ndla-article [data-embed-type="file-list"],.ndla-article [data-embed-type="uu-disclaimer"] {
318
335
  margin-block-start: var(--spacing-xlarge);
319
336
  margin-block-end: var(--spacing-xlarge);
320
337
  }
321
338
 
322
- .ndla-article section:not([class]) > :is(h2, [data-embed-type="copy-heading"]),.ndla-article section:not([class]) > div:not([class]) > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="framed-content"] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="grid"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="grid-parallax"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="factbox"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-wrapper] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article details > :is(h2, [data-embed-type="copy-heading"]),.ndla-article blockquote > :is(h2, [data-embed-type="copy-heading"]) {
339
+ .ndla-article section:not([class]) > :is(h2, [data-embed-type="copy-heading"]),.ndla-article section:not([class]) > div:not([class]) > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="framed-content"] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="grid"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="grid-parallax"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="factbox"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-wrapper] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article details > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="expandable-box"] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article blockquote > :is(h2, [data-embed-type="copy-heading"]) {
323
340
  margin-block-start: var(--spacing-large);
324
341
  }
325
342
 
326
- .ndla-article section:not([class]) > h3,.ndla-article section:not([class]) > div:not([class]) > h3,.ndla-article [data-embed-type="framed-content"] > h3,.ndla-article [data-embed-type="grid"] > div > h3,.ndla-article [data-embed-type="grid-parallax"] > div > h3,.ndla-article [data-embed-type="factbox"] > div > h3,.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > h3,.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > h3,.ndla-article [data-embed-wrapper] > h3,.ndla-article details > h3,.ndla-article blockquote > h3 {
343
+ .ndla-article section:not([class]) > h3,.ndla-article section:not([class]) > div:not([class]) > h3,.ndla-article [data-embed-type="framed-content"] > h3,.ndla-article [data-embed-type="grid"] > div > h3,.ndla-article [data-embed-type="grid-parallax"] > div > h3,.ndla-article [data-embed-type="factbox"] > div > h3,.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > h3,.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > h3,.ndla-article [data-embed-wrapper] > h3,.ndla-article details > h3,.ndla-article [data-embed-type="expandable-box"] > h3,.ndla-article blockquote > h3 {
327
344
  margin-block-start: var(--spacing-medium);
328
345
  }
329
346
 
330
- .ndla-article section:not([class]) > :is(h4, h5, h6),.ndla-article section:not([class]) > div:not([class]) > :is(h4, h5, h6),.ndla-article [data-embed-type="framed-content"] > :is(h4, h5, h6),.ndla-article [data-embed-type="grid"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="grid-parallax"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="factbox"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is(h4, h5, h6),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is(h4, h5, h6),.ndla-article [data-embed-wrapper] > :is(h4, h5, h6),.ndla-article details > :is(h4, h5, h6),.ndla-article blockquote > :is(h4, h5, h6) {
347
+ .ndla-article section:not([class]) > :is(h4, h5, h6),.ndla-article section:not([class]) > div:not([class]) > :is(h4, h5, h6),.ndla-article [data-embed-type="framed-content"] > :is(h4, h5, h6),.ndla-article [data-embed-type="grid"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="grid-parallax"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="factbox"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is(h4, h5, h6),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is(h4, h5, h6),.ndla-article [data-embed-wrapper] > :is(h4, h5, h6),.ndla-article details > :is(h4, h5, h6),.ndla-article [data-embed-type="expandable-box"] > :is(h4, h5, h6),.ndla-article blockquote > :is(h4, h5, h6) {
331
348
  margin-block-start: var(--spacing-small);
332
349
  }
333
350
 
334
- .ndla-article section:not([class]) > :is(figure),.ndla-article section:not([class]) > div:not([class]) > :is(figure),.ndla-article [data-embed-type="framed-content"] > :is(figure),.ndla-article [data-embed-type="grid"] > div > :is(figure),.ndla-article [data-embed-type="grid-parallax"] > div > :is(figure),.ndla-article [data-embed-type="factbox"] > div > :is(figure),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is(figure),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is(figure),.ndla-article [data-embed-wrapper] > :is(figure),.ndla-article details > :is(figure),.ndla-article blockquote > :is(figure) {
351
+ .ndla-article section:not([class]) > :is(figure),.ndla-article section:not([class]) > div:not([class]) > :is(figure),.ndla-article [data-embed-type="framed-content"] > :is(figure),.ndla-article [data-embed-type="grid"] > div > :is(figure),.ndla-article [data-embed-type="grid-parallax"] > div > :is(figure),.ndla-article [data-embed-type="factbox"] > div > :is(figure),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is(figure),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is(figure),.ndla-article [data-embed-wrapper] > :is(figure),.ndla-article details > :is(figure),.ndla-article [data-embed-type="expandable-box"] > :is(figure),.ndla-article blockquote > :is(figure) {
335
352
  margin-block-start: var(--spacing-xlarge);
336
353
  }
337
354
 
package/es/globalCss.js CHANGED
@@ -62,13 +62,18 @@ export const globalCss = defineGlobalStyles({
62
62
  '& p[data-align="center"]': {
63
63
  textAlign: "center"
64
64
  },
65
+ // TODO: This is not an actual text style. Should it be?
66
+ blockquote: {
67
+ textStyle: "body.medium",
68
+ fontFamily: "serif"
69
+ },
65
70
  '& p:has(span[dir="rtl"])': {
66
71
  direction: "rtl"
67
72
  },
68
73
  textStyle: "body.article",
69
74
  width: "100%",
70
75
  // Non-figure block elements that should have margin above and below.
71
- '& details, :not(li) > blockquote, [data-embed-type="framed-content"], [data-embed-type="factbox"], table, [data-embed-type="related-content-list"], [data-embed-type="link-block-list"], [data-embed-type="blog-post"], [data-embed-type="campaign-block"], [data-embed-type="key-figure"], [data-embed-type="grid"], [data-embed-type="contact-block"], [data-embed-type="file-list"], [data-embed-type="uu-disclaimer"]': {
76
+ '& details, :not(li) > blockquote, [data-embed-type="expandable-box"], [data-embed-type="framed-content"], [data-embed-type="factbox"], table, [data-embed-type="related-content-list"], [data-embed-type="link-block-list"], [data-embed-type="blog-post"], [data-embed-type="campaign-block"], [data-embed-type="key-figure"], [data-embed-type="grid"], [data-embed-type="contact-block"], [data-embed-type="file-list"], [data-embed-type="uu-disclaimer"]': {
72
77
  marginBlockStart: "xxlarge",
73
78
  marginBlockEnd: "xxlarge",
74
79
  tabletDown: {
@@ -77,7 +82,7 @@ export const globalCss = defineGlobalStyles({
77
82
  }
78
83
  },
79
84
  // Article content is usually wrapped in a section. The rest of the elements in this list contains other elements, and should add margin to them no matter where they are placed in the DOM.
80
- '& section:not([class]), section:not([class]) > div:not([class]), [data-embed-type="framed-content"], [data-embed-type="grid"] > div, [data-embed-type="grid-parallax"] > div, [data-embed-type="factbox"] > div, [data-embed-type="copyright"] > [data-copyright-content], [data-embed-type="uu-disclaimer"] > [data-uu-content], [data-embed-wrapper], details, blockquote': {
85
+ '& section:not([class]), section:not([class]) > div:not([class]), [data-embed-type="framed-content"], [data-embed-type="grid"] > div, [data-embed-type="grid-parallax"] > div, [data-embed-type="factbox"] > div, [data-embed-type="copyright"] > [data-copyright-content], [data-embed-type="uu-disclaimer"] > [data-uu-content], [data-embed-wrapper], details, [data-embed-type="expandable-box"], blockquote': {
81
86
  '& > :is(h2, [data-embed-type="copy-heading"])': {
82
87
  marginBlockStart: "xlarge",
83
88
  marginBlockEnd: "small",
@@ -109,6 +114,9 @@ export const globalCss = defineGlobalStyles({
109
114
  '& > :is(p, ul, ol, dl, [data-embed-type="speech"])': {
110
115
  marginBlockStart: "xsmall",
111
116
  marginBlockEnd: "xsmall"
117
+ },
118
+ '& > :is([data-embed-type="ordered-list"])': {
119
+ marginInlineStart: "xlarge!"
112
120
  }
113
121
  },
114
122
  '& [data-embed-type="framed-content"], [data-embed-type="grid"] > div, [data-embed-type="grid-parallax"] > div, [data-embed-type="factbox"] > div, [data-embed-type="copyright"] > [data-copyright-content], [data-embed-type="uu-disclaimer"] > [data-uu-content], details, blockquote': {
package/es/plugins/forwardCssPropPlugin.js CHANGED
@@ -38,7 +38,7 @@ export const transformStyledFn = args => {
38
38
  factoryJs.code = factoryJs.code.replace(propsCode, `const { as: Element = __base__, consumeCss, children, ...restProps } = props
39
39
 
40
40
  const consume = props.asChild
41
- ? consumeCss && options.baseComponent
41
+ ? consumeCss && (options.baseComponent || Dynamic.__baseComponent__)
42
42
  : consumeCss ?? contextConsume`);
43
43
  const cvaCode = "const cvaStyles = __cvaFn__.raw(variantProps)";
44
44
  factoryJs.code = factoryJs.code.replace(cvaCode, `${cvaCode}
@@ -46,6 +46,9 @@ export const transformStyledFn = args => {
46
46
  return css.raw(cvaStyles, propStyles, cssStyles)
47
47
  }`);
48
48
  factoryJs.code = factoryJs.code.replace("className: classes()", `...(consume ? { className: classes() } : { css: classes(), consumeCss } )`);
49
+ const styledComponentForwardPropDeclaration = `StyledComponent.__shouldForwardProps__ = shouldForwardProp`;
50
+ factoryJs.code = factoryJs.code.replace(styledComponentForwardPropDeclaration, `${styledComponentForwardPropDeclaration}
51
+ StyledComponent.__baseComponent__ = options.baseComponent ?? Dynamic.__baseComponent__`);
49
52
  const shouldForwardPropCode = "shouldForwardProp?(prop: string, variantKeys: string[]): boolean";
50
53
  jsxTypes.code = jsxTypes.code.replace(shouldForwardPropCode, `${shouldForwardPropCode}
51
54
  /**
package/lib/globalCss.js CHANGED
@@ -68,13 +68,18 @@ const globalCss = exports.globalCss = (0, _dev.defineGlobalStyles)({
68
68
  '& p[data-align="center"]': {
69
69
  textAlign: "center"
70
70
  },
71
+ // TODO: This is not an actual text style. Should it be?
72
+ blockquote: {
73
+ textStyle: "body.medium",
74
+ fontFamily: "serif"
75
+ },
71
76
  '& p:has(span[dir="rtl"])': {
72
77
  direction: "rtl"
73
78
  },
74
79
  textStyle: "body.article",
75
80
  width: "100%",
76
81
  // Non-figure block elements that should have margin above and below.
77
- '& details, :not(li) > blockquote, [data-embed-type="framed-content"], [data-embed-type="factbox"], table, [data-embed-type="related-content-list"], [data-embed-type="link-block-list"], [data-embed-type="blog-post"], [data-embed-type="campaign-block"], [data-embed-type="key-figure"], [data-embed-type="grid"], [data-embed-type="contact-block"], [data-embed-type="file-list"], [data-embed-type="uu-disclaimer"]': {
82
+ '& details, :not(li) > blockquote, [data-embed-type="expandable-box"], [data-embed-type="framed-content"], [data-embed-type="factbox"], table, [data-embed-type="related-content-list"], [data-embed-type="link-block-list"], [data-embed-type="blog-post"], [data-embed-type="campaign-block"], [data-embed-type="key-figure"], [data-embed-type="grid"], [data-embed-type="contact-block"], [data-embed-type="file-list"], [data-embed-type="uu-disclaimer"]': {
78
83
  marginBlockStart: "xxlarge",
79
84
  marginBlockEnd: "xxlarge",
80
85
  tabletDown: {
@@ -83,7 +88,7 @@ const globalCss = exports.globalCss = (0, _dev.defineGlobalStyles)({
83
88
  }
84
89
  },
85
90
  // Article content is usually wrapped in a section. The rest of the elements in this list contains other elements, and should add margin to them no matter where they are placed in the DOM.
86
- '& section:not([class]), section:not([class]) > div:not([class]), [data-embed-type="framed-content"], [data-embed-type="grid"] > div, [data-embed-type="grid-parallax"] > div, [data-embed-type="factbox"] > div, [data-embed-type="copyright"] > [data-copyright-content], [data-embed-type="uu-disclaimer"] > [data-uu-content], [data-embed-wrapper], details, blockquote': {
91
+ '& section:not([class]), section:not([class]) > div:not([class]), [data-embed-type="framed-content"], [data-embed-type="grid"] > div, [data-embed-type="grid-parallax"] > div, [data-embed-type="factbox"] > div, [data-embed-type="copyright"] > [data-copyright-content], [data-embed-type="uu-disclaimer"] > [data-uu-content], [data-embed-wrapper], details, [data-embed-type="expandable-box"], blockquote': {
87
92
  '& > :is(h2, [data-embed-type="copy-heading"])': {
88
93
  marginBlockStart: "xlarge",
89
94
  marginBlockEnd: "small",
@@ -115,6 +120,9 @@ const globalCss = exports.globalCss = (0, _dev.defineGlobalStyles)({
115
120
  '& > :is(p, ul, ol, dl, [data-embed-type="speech"])': {
116
121
  marginBlockStart: "xsmall",
117
122
  marginBlockEnd: "xsmall"
123
+ },
124
+ '& > :is([data-embed-type="ordered-list"])': {
125
+ marginInlineStart: "xlarge!"
118
126
  }
119
127
  },
120
128
  '& [data-embed-type="framed-content"], [data-embed-type="grid"] > div, [data-embed-type="grid-parallax"] > div, [data-embed-type="factbox"] > div, [data-embed-type="copyright"] > [data-copyright-content], [data-embed-type="uu-disclaimer"] > [data-uu-content], details, blockquote': {
package/lib/plugins/forwardCssPropPlugin.js CHANGED
@@ -45,7 +45,7 @@ const transformStyledFn = args => {
45
45
  factoryJs.code = factoryJs.code.replace(propsCode, `const { as: Element = __base__, consumeCss, children, ...restProps } = props
46
46
 
47
47
  const consume = props.asChild
48
- ? consumeCss && options.baseComponent
48
+ ? consumeCss && (options.baseComponent || Dynamic.__baseComponent__)
49
49
  : consumeCss ?? contextConsume`);
50
50
  const cvaCode = "const cvaStyles = __cvaFn__.raw(variantProps)";
51
51
  factoryJs.code = factoryJs.code.replace(cvaCode, `${cvaCode}
@@ -53,6 +53,9 @@ const transformStyledFn = args => {
53
53
  return css.raw(cvaStyles, propStyles, cssStyles)
54
54
  }`);
55
55
  factoryJs.code = factoryJs.code.replace("className: classes()", `...(consume ? { className: classes() } : { css: classes(), consumeCss } )`);
56
+ const styledComponentForwardPropDeclaration = `StyledComponent.__shouldForwardProps__ = shouldForwardProp`;
57
+ factoryJs.code = factoryJs.code.replace(styledComponentForwardPropDeclaration, `${styledComponentForwardPropDeclaration}
58
+ StyledComponent.__baseComponent__ = options.baseComponent ?? Dynamic.__baseComponent__`);
56
59
  const shouldForwardPropCode = "shouldForwardProp?(prop: string, variantKeys: string[]): boolean";
57
60
  jsxTypes.code = jsxTypes.code.replace(shouldForwardPropCode, `${shouldForwardPropCode}
58
61
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ndla/preset-panda",
3
- "version": "0.0.38",
3
+ "version": "0.0.40",
4
4
  "description": "Panda preset for NDLA.",
5
5
  "license": "GPL-3.0",
6
6
  "main": "lib/index.js",
@@ -37,5 +37,5 @@
37
37
  "publishConfig": {
38
38
  "access": "public"
39
39
  },
40
- "gitHead": "e29f1689ea7268f8a1eed1c99f179a3524c70758"
40
+ "gitHead": "a50ec9bd699eabeb3b250d922107e8f9a1d18304"
41
41
  }