@ndla/preset-panda 0.0.37 → 0.0.39

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 +19 -11
  2. package/es/globalCss.js +10 -3
  3. package/es/plugins/forwardCssPropPlugin.js +4 -1
  4. package/lib/globalCss.js +10 -3
  5. package/lib/plugins/forwardCssPropPlugin.js +4 -1
  6. package/package.json +2 -2
package/dist/styles.css CHANGED
@@ -12,6 +12,10 @@
12
12
  font-feature-settings: 'ss03' on, 'liga' off, 'clig' off;
13
13
  }
14
14
 
15
+ html h1,html h2,html h3,html h4,html h5,html h6 {
16
+ text-wrap: unset;
17
+ }
18
+
15
19
  body {
16
20
  background: var(--colors-background-default);
17
21
  color: var(--colors-text-default);
@@ -116,36 +120,40 @@
116
120
  direction: rtl;
117
121
  }
118
122
 
119
- .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"] {
123
+ .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"] {
120
124
  margin-block-start: var(--spacing-xxlarge);
121
125
  margin-block-end: var(--spacing-xxlarge);
122
126
  }
123
127
 
124
- .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"]) {
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 [data-embed-type="expandable-box"] blockquote > :is(h2, [data-embed-type="copy-heading"]) {
125
129
  margin-block-start: var(--spacing-xlarge);
126
130
  margin-block-end: var(--spacing-small);
127
131
  }
128
132
 
129
- .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 {
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 [data-embed-type="expandable-box"] blockquote > h3 {
130
134
  margin-block-start: var(--spacing-large);
131
135
  margin-block-end: var(--spacing-xsmall);
132
136
  }
133
137
 
134
- .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) {
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 [data-embed-type="expandable-box"] blockquote > :is(h4, h5, h6) {
135
139
  margin-block-start: var(--spacing-medium);
136
140
  margin-block-end: var(--spacing-xsmall);
137
141
  }
138
142
 
139
- .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) {
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 [data-embed-type="expandable-box"] blockquote > :is(figure) {
140
144
  margin-block-start: var(--spacing-xxlarge);
141
145
  margin-block-end: var(--spacing-xxlarge);
142
146
  }
143
147
 
144
- .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"]) {
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 [data-embed-type="expandable-box"] blockquote > :is(p, ul, ol, dl, [data-embed-type="speech"]) {
145
149
  margin-block-start: var(--spacing-xsmall);
146
150
  margin-block-end: var(--spacing-xsmall);
147
151
  }
148
152
 
153
+ .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"] blockquote > :is([data-embed-type="ordered-list"]) {
154
+ margin-inline-start: var(--spacing-xlarge) !important;
155
+ }
156
+
149
157
  .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 {
150
158
  margin-block-start: 0;
151
159
  }
@@ -310,24 +318,24 @@
310
318
  }
311
319
 
312
320
  @media screen and (max-width: 37.56rem) {
313
- .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"] {
321
+ .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"] {
314
322
  margin-block-start: var(--spacing-xlarge);
315
323
  margin-block-end: var(--spacing-xlarge);
316
324
  }
317
325
 
318
- .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"]) {
326
+ .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"] blockquote > :is(h2, [data-embed-type="copy-heading"]) {
319
327
  margin-block-start: var(--spacing-large);
320
328
  }
321
329
 
322
- .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 {
330
+ .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"] blockquote > h3 {
323
331
  margin-block-start: var(--spacing-medium);
324
332
  }
325
333
 
326
- .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) {
334
+ .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"] blockquote > :is(h4, h5, h6) {
327
335
  margin-block-start: var(--spacing-small);
328
336
  }
329
337
 
330
- .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) {
338
+ .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"] blockquote > :is(figure) {
331
339
  margin-block-start: var(--spacing-xlarge);
332
340
  }
333
341
 
package/es/globalCss.js CHANGED
@@ -16,7 +16,11 @@ export const globalCss = defineGlobalStyles({
16
16
  },
17
17
  html: {
18
18
  minHeight: "100%",
19
- fontFeatureSettings: "'ss03' on, 'liga' off, 'clig' off"
19
+ fontFeatureSettings: "'ss03' on, 'liga' off, 'clig' off",
20
+ // this is included in the css reset we use. We don't want it.
21
+ "& h1, h2, h3, h4, h5, h6": {
22
+ textWrap: "unset"
23
+ }
20
24
  },
21
25
  body: {
22
26
  background: "background.default",
@@ -64,7 +68,7 @@ export const globalCss = defineGlobalStyles({
64
68
  textStyle: "body.article",
65
69
  width: "100%",
66
70
  // Non-figure block elements that should have margin above and below.
67
- '& 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"]': {
71
+ '& 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"]': {
68
72
  marginBlockStart: "xxlarge",
69
73
  marginBlockEnd: "xxlarge",
70
74
  tabletDown: {
@@ -73,7 +77,7 @@ export const globalCss = defineGlobalStyles({
73
77
  }
74
78
  },
75
79
  // 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.
76
- '& 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': {
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, [data-embed-type="expandable-box"] blockquote': {
77
81
  '& > :is(h2, [data-embed-type="copy-heading"])': {
78
82
  marginBlockStart: "xlarge",
79
83
  marginBlockEnd: "small",
@@ -105,6 +109,9 @@ export const globalCss = defineGlobalStyles({
105
109
  '& > :is(p, ul, ol, dl, [data-embed-type="speech"])': {
106
110
  marginBlockStart: "xsmall",
107
111
  marginBlockEnd: "xsmall"
112
+ },
113
+ '& > :is([data-embed-type="ordered-list"])': {
114
+ marginInlineStart: "xlarge!"
108
115
  }
109
116
  },
110
117
  '& [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
@@ -22,7 +22,11 @@ const globalCss = exports.globalCss = (0, _dev.defineGlobalStyles)({
22
22
  },
23
23
  html: {
24
24
  minHeight: "100%",
25
- fontFeatureSettings: "'ss03' on, 'liga' off, 'clig' off"
25
+ fontFeatureSettings: "'ss03' on, 'liga' off, 'clig' off",
26
+ // this is included in the css reset we use. We don't want it.
27
+ "& h1, h2, h3, h4, h5, h6": {
28
+ textWrap: "unset"
29
+ }
26
30
  },
27
31
  body: {
28
32
  background: "background.default",
@@ -70,7 +74,7 @@ const globalCss = exports.globalCss = (0, _dev.defineGlobalStyles)({
70
74
  textStyle: "body.article",
71
75
  width: "100%",
72
76
  // Non-figure block elements that should have margin above and below.
73
- '& 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"]': {
77
+ '& 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"]': {
74
78
  marginBlockStart: "xxlarge",
75
79
  marginBlockEnd: "xxlarge",
76
80
  tabletDown: {
@@ -79,7 +83,7 @@ const globalCss = exports.globalCss = (0, _dev.defineGlobalStyles)({
79
83
  }
80
84
  },
81
85
  // 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.
82
- '& 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': {
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, [data-embed-type="expandable-box"] blockquote': {
83
87
  '& > :is(h2, [data-embed-type="copy-heading"])': {
84
88
  marginBlockStart: "xlarge",
85
89
  marginBlockEnd: "small",
@@ -111,6 +115,9 @@ const globalCss = exports.globalCss = (0, _dev.defineGlobalStyles)({
111
115
  '& > :is(p, ul, ol, dl, [data-embed-type="speech"])': {
112
116
  marginBlockStart: "xsmall",
113
117
  marginBlockEnd: "xsmall"
118
+ },
119
+ '& > :is([data-embed-type="ordered-list"])': {
120
+ marginInlineStart: "xlarge!"
114
121
  }
115
122
  },
116
123
  '& [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.37",
3
+ "version": "0.0.39",
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": "90fba8b86f3dcb8b52dfe9e5a6cc2722f55aa843"
40
+ "gitHead": "98f727d2e22b4030ec61672a8f843b2d0d0ef278"
41
41
  }