@ndla/ui 56.0.55-alpha.0 → 56.0.56

package/dist/panda.buildinfo.json

@@ -196,7 +196,7 @@
       "opacity]___[value:0",
       "cursor]___[value:pointer",
       "opacity]___[value:1]___[cond:&:focus, &:focus-visible, &:active",
-      "marginInlineStart]___[value:xsmall",
+      "marginBlockStart]___[value:3xsmall",
       "border]___[value:0",
       "height]___[value:auto",
       "textStyle]___[value:label.large",
@@ -315,7 +315,6 @@
       "backgroundColor]___[value:surface.infoSubtle.hover]___[cond:_hover",
       "gap]___[value:small",
       "paddingInline]___[value:0",
-      "marginBlockStart]___[value:3xsmall",
       "background]___[value:surface.brand.1.subtle]___[cond:_first",
       "borderColor]___[value:stroke.default]___[cond:_first",
       "fontWeight]___[value:bold]___[cond:_first<___>& p",
@@ -324,7 +323,8 @@
       "gridColumnGap]___[value:medium",
       "backgroundColor]___[value:background.subtle",
       "gridTemplateColumns]___[value:repeat(2, minmax(0, 1fr))",
-      "marginTop]___[value:auto]___[cond:& > [data-embed-type='pitch']<___>& > :last-child",
+      "height]___[value:100%]___[cond:& :not(div[data-parallax-cell='true']) > div[data-embed-type='pitch']",
+      "marginTop]___[value:auto]___[cond:& :not(div[data-parallax-cell='true']) > div[data-embed-type='pitch']<___>& > :last-child",
       "gridTemplateColumns]___[value:repeat(1, minmax(0, 1fr))]___[cond:tabletDown",
       "gridTemplateColumns]___[value:repeat(2, minmax(0, 1fr))]___[cond:tabletToDesktop",
       "display]___[value:flex]___[cond:tabletToDesktop<___>& > div:nth-child(3):last-child",

package/dist/styles.css

@@ -441,8 +441,8 @@
     cursor: pointer;
 }
 
-  .ms_xsmall {
-    margin-inline-start: var(--spacing-xsmall);
+  .mbs_3xsmall {
+    margin-block-start: var(--spacing-3xsmall);
 }
 
   .bd_0 {
@@ -565,10 +565,6 @@
     padding-inline: 0;
 }
 
-  .mbs_3xsmall {
-    margin-block-start: var(--spacing-3xsmall);
-}
-
   .w_surface\.3xsmall {
     width: var(--sizes-surface-3xsmall);
 }
@@ -1063,6 +1059,10 @@
     background: var(--colors-surface-brand-1-subtle);
 }
 
+  .\[\&_\:not\(div\[data-parallax-cell\=\'true\'\]\)_\>_div\[data-embed-type\=\'pitch\'\]\]\:h_100\% :not(div[data-parallax-cell='true']) > div[data-embed-type='pitch'] {
+    height: 100%;
+}
+
   .\[\&_\>_div\]\:pos_sticky > div {
     position: sticky;
 }
@@ -1258,7 +1258,7 @@
     font-weight: var(--font-weights-bold);
 }
 
-  .\[\&_\>_\[data-embed-type\=\'pitch\'\]\]\:\[\&_\>_\:last-child\]\:mt_auto > [data-embed-type='pitch'] > :last-child {
+  .\[\&_\:not\(div\[data-parallax-cell\=\'true\'\]\)_\>_div\[data-embed-type\=\'pitch\'\]\]\:\[\&_\>_\:last-child\]\:mt_auto :not(div[data-parallax-cell='true']) > div[data-embed-type='pitch'] > :last-child {
     margin-top: auto;
 }
 

package/es/Embed/BrightcoveEmbed.js

@@ -17,7 +17,7 @@ import { licenseAttributes } from "../utils/licenseAttributes";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const LinkedVideoButton = styled(Button, {
   base: {
-    marginInlineStart: "xsmall"
+    marginBlockStart: "3xsmall"
   }
 });
 const BrightcoveIframe = styled("iframe", {
@@ -118,11 +118,13 @@ const BrightcoveEmbed = _ref => {
       type: "video",
       copyright: data.copyright,
       description: parsedDescription,
-      children: !!linkedVideoId && /*#__PURE__*/_jsx(LinkedVideoButton, {
-        size: "small",
-        variant: "secondary",
-        onClick: () => setShowOriginalVideo(p => !p),
-        children: t(`figure.button.${!showOriginalVideo ? "original" : "alternative"}`)
+      children: /*#__PURE__*/_jsx("div", {
+        children: !!linkedVideoId && /*#__PURE__*/_jsx(LinkedVideoButton, {
+          size: "small",
+          variant: "secondary",
+          onClick: () => setShowOriginalVideo(p => !p),
+          children: t(`figure.button.${!showOriginalVideo ? "original" : "alternative"}`)
+        })
       })
     })]
   });

package/es/Grid/Grid.js

@@ -19,7 +19,8 @@ const GridContainer = styled("div", {
     backgroundColor: "background.subtle",
     minWidth: "surface.xxsmall",
     gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-    "& > [data-embed-type='pitch']": {
+    "& :not(div[data-parallax-cell='true']) > div[data-embed-type='pitch']": {
+      height: "100%",
       "& > :last-child": {
         marginTop: "auto"
       }

package/es/Pitch/Pitch.js

@@ -73,7 +73,7 @@ export const Pitch = _ref => {
         variant: "rounded",
         src: metaImage.url,
         alt: metaImage.alt,
-        sizes: "180px",
+        sizes: "480px",
         fallbackWidth: 300,
         width: 550,
         height: 310

package/es/locale/messages-en.js

@@ -132,6 +132,7 @@ const messages = {
     label: {
       subjects: "Subjects"
     },
+    includes: "Includes:",
     searchField: {
       contentTypeResultShowMoreLabel: "Show more results",
       contentTypeResultShowLessLabel: "Show less results",

package/es/locale/messages-nb.js

@@ -132,6 +132,7 @@ const messages = {
     label: {
       subjects: "Fag:"
     },
+    includes: "Inneholder:",
     searchField: {
       contentTypeResultShowMoreLabel: "Se flere resultater",
       contentTypeResultShowLessLabel: "Se færre resultater",

package/es/locale/messages-nn.js

@@ -132,6 +132,7 @@ const messages = {
     label: {
       subjects: "Fag:"
     },
+    includes: "Inneheld:",
     searchField: {
       contentTypeResultShowMoreLabel: "Sjå fleire resultat",
       contentTypeResultShowLessLabel: "Sjå færre resultat",

package/es/locale/messages-se.js

@@ -132,6 +132,7 @@ const messages = {
     label: {
       subjects: "Fága:"
     },
+    includes: "Inneholder:",
     searchField: {
       contentTypeResultShowMoreLabel: "Geahča eanet bohtosiid",
       contentTypeResultShowLessLabel: "Geahča unnit bohtosiid",

package/es/locale/messages-sma.js

@@ -132,6 +132,7 @@ const messages = {
     label: {
       subjects: "Faage:"
     },
+    includes: "Inneholder:",
     searchField: {
       contentTypeResultShowMoreLabel: "Gïehtjh jienebh illedahkh",
       contentTypeResultShowLessLabel: "Gïehtjh vaenebh illedahkh",

package/lib/Embed/BrightcoveEmbed.js

@@ -24,7 +24,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 
 const LinkedVideoButton = (0, _jsx2.styled)(_primitives.Button, {
   base: {
-    marginInlineStart: "xsmall"
+    marginBlockStart: "3xsmall"
   }
 });
 const BrightcoveIframe = (0, _jsx2.styled)("iframe", {
@@ -127,11 +127,13 @@ const BrightcoveEmbed = _ref => {
       type: "video",
       copyright: data.copyright,
       description: parsedDescription,
-      children: !!linkedVideoId && /*#__PURE__*/(0, _jsxRuntime.jsx)(LinkedVideoButton, {
-        size: "small",
-        variant: "secondary",
-        onClick: () => setShowOriginalVideo(p => !p),
-        children: t(`figure.button.${!showOriginalVideo ? "original" : "alternative"}`)
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: !!linkedVideoId && /*#__PURE__*/(0, _jsxRuntime.jsx)(LinkedVideoButton, {
+          size: "small",
+          variant: "secondary",
+          onClick: () => setShowOriginalVideo(p => !p),
+          children: t(`figure.button.${!showOriginalVideo ? "original" : "alternative"}`)
+        })
       })
     })]
   });

package/lib/Grid/Grid.js

@@ -25,7 +25,8 @@ const GridContainer = (0, _jsx2.styled)("div", {
     backgroundColor: "background.subtle",
     minWidth: "surface.xxsmall",
     gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-    "& > [data-embed-type='pitch']": {
+    "& :not(div[data-parallax-cell='true']) > div[data-embed-type='pitch']": {
+      height: "100%",
       "& > :last-child": {
         marginTop: "auto"
       }

package/lib/Pitch/Pitch.js

@@ -80,7 +80,7 @@ const Pitch = _ref => {
         variant: "rounded",
         src: metaImage.url,
         alt: metaImage.alt,
-        sizes: "180px",
+        sizes: "480px",
         fallbackWidth: 300,
         width: 550,
         height: 310

package/lib/locale/messages-en.d.ts

@@ -122,6 +122,7 @@ declare const messages: {
         label: {
             subjects: string;
         };
+        includes: string;
         searchField: {
             contentTypeResultShowMoreLabel: string;
             contentTypeResultShowLessLabel: string;

package/lib/locale/messages-en.js

@@ -139,6 +139,7 @@ const messages = {
     label: {
       subjects: "Subjects"
     },
+    includes: "Includes:",
     searchField: {
       contentTypeResultShowMoreLabel: "Show more results",
       contentTypeResultShowLessLabel: "Show less results",

package/lib/locale/messages-nb.d.ts

@@ -122,6 +122,7 @@ declare const messages: {
         label: {
             subjects: string;
         };
+        includes: string;
         searchField: {
             contentTypeResultShowMoreLabel: string;
             contentTypeResultShowLessLabel: string;

package/lib/locale/messages-nb.js

@@ -139,6 +139,7 @@ const messages = {
     label: {
       subjects: "Fag:"
     },
+    includes: "Inneholder:",
     searchField: {
       contentTypeResultShowMoreLabel: "Se flere resultater",
       contentTypeResultShowLessLabel: "Se færre resultater",

package/lib/locale/messages-nn.d.ts

@@ -122,6 +122,7 @@ declare const messages: {
         label: {
             subjects: string;
         };
+        includes: string;
         searchField: {
             contentTypeResultShowMoreLabel: string;
             contentTypeResultShowLessLabel: string;

package/lib/locale/messages-nn.js

@@ -139,6 +139,7 @@ const messages = {
     label: {
       subjects: "Fag:"
     },
+    includes: "Inneheld:",
     searchField: {
       contentTypeResultShowMoreLabel: "Sjå fleire resultat",
       contentTypeResultShowLessLabel: "Sjå færre resultat",

package/lib/locale/messages-se.d.ts

@@ -122,6 +122,7 @@ declare const messages: {
         label: {
             subjects: string;
         };
+        includes: string;
         searchField: {
             contentTypeResultShowMoreLabel: string;
             contentTypeResultShowLessLabel: string;

package/lib/locale/messages-se.js

@@ -139,6 +139,7 @@ const messages = {
     label: {
       subjects: "Fága:"
     },
+    includes: "Inneholder:",
     searchField: {
       contentTypeResultShowMoreLabel: "Geahča eanet bohtosiid",
       contentTypeResultShowLessLabel: "Geahča unnit bohtosiid",

package/lib/locale/messages-sma.d.ts

@@ -122,6 +122,7 @@ declare const messages: {
         label: {
             subjects: string;
         };
+        includes: string;
         searchField: {
             contentTypeResultShowMoreLabel: string;
             contentTypeResultShowLessLabel: string;

package/lib/locale/messages-sma.js

@@ -139,6 +139,7 @@ const messages = {
     label: {
       subjects: "Faage:"
     },
+    includes: "Inneholder:",
     searchField: {
       contentTypeResultShowMoreLabel: "Gïehtjh jienebh illedahkh",
       contentTypeResultShowLessLabel: "Gïehtjh vaenebh illedahkh",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.55-alpha.0",
+  "version": "56.0.56",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -58,5 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "61d88c7c1bbad19fd1d94f13c0088b0684f95ff6"
+  "gitHead": "fd1693bd3ff76f41141c5057a1954d1dff9dc190"
 }

package/src/Embed/BrightcoveEmbed.tsx

@@ -25,7 +25,7 @@ interface Props {
 
 const LinkedVideoButton = styled(Button, {
   base: {
-    marginInlineStart: "xsmall",
+    marginBlockStart: "3xsmall",
   },
 });
 
@@ -117,11 +117,13 @@ const BrightcoveEmbed = ({ embed, renderContext = "article", lang }: Props) => {
         />
       </div>
       <EmbedByline type="video" copyright={data.copyright!} description={parsedDescription}>
-        {!!linkedVideoId && (
-          <LinkedVideoButton size="small" variant="secondary" onClick={() => setShowOriginalVideo((p) => !p)}>
-            {t(`figure.button.${!showOriginalVideo ? "original" : "alternative"}`)}
-          </LinkedVideoButton>
-        )}
+        <div>
+          {!!linkedVideoId && (
+            <LinkedVideoButton size="small" variant="secondary" onClick={() => setShowOriginalVideo((p) => !p)}>
+              {t(`figure.button.${!showOriginalVideo ? "original" : "alternative"}`)}
+            </LinkedVideoButton>
+          )}
+        </div>
       </EmbedByline>
     </Figure>
   );

package/src/Grid/Grid.tsx

@@ -20,7 +20,9 @@ const GridContainer = styled("div", {
     backgroundColor: "background.subtle",
     minWidth: "surface.xxsmall",
     gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-    "& > [data-embed-type='pitch']": {
+
+    "& :not(div[data-parallax-cell='true']) > div[data-embed-type='pitch']": {
+      height: "100%",
       "& > :last-child": {
         marginTop: "auto",
       },

package/src/Pitch/Pitch.stories.tsx

@@ -44,8 +44,12 @@ export default {
 export const Default: StoryFn<typeof Pitch> = ({ ...args }) => {
   return (
     <Grid columns="2" background="transparent">
-      <Pitch {...args} />
-      <Pitch {...args} description="Kortere beskrivelse" />
+      <div data-type="grid-cell" data-parallax-cell="false">
+        <Pitch {...args} />
+      </div>
+      <div data-type="grid-cell" data-parallax-cell="false">
+        <Pitch {...args} description="Kortere beskrivelse" />
+      </div>
     </Grid>
   );
 };

package/src/Pitch/Pitch.tsx

@@ -72,7 +72,7 @@ export const Pitch = ({ title, url, metaImage, path, description }: Props) => {
           variant="rounded"
           src={metaImage.url}
           alt={metaImage.alt}
-          sizes="180px"
+          sizes="480px"
           fallbackWidth={300}
           width={550}
           height={310}

package/src/locale/messages-en.ts

@@ -133,6 +133,7 @@ const messages = {
     label: {
       subjects: "Subjects",
     },
+    includes: "Includes:",
     searchField: {
       contentTypeResultShowMoreLabel: "Show more results",
       contentTypeResultShowLessLabel: "Show less results",

package/src/locale/messages-nb.ts

@@ -133,6 +133,7 @@ const messages = {
     label: {
       subjects: "Fag:",
     },
+    includes: "Inneholder:",
     searchField: {
       contentTypeResultShowMoreLabel: "Se flere resultater",
       contentTypeResultShowLessLabel: "Se færre resultater",

package/src/locale/messages-nn.ts

@@ -133,6 +133,7 @@ const messages = {
     label: {
       subjects: "Fag:",
     },
+    includes: "Inneheld:",
     searchField: {
       contentTypeResultShowMoreLabel: "Sjå fleire resultat",
       contentTypeResultShowLessLabel: "Sjå færre resultat",

package/src/locale/messages-se.ts

@@ -133,6 +133,7 @@ const messages = {
     label: {
       subjects: "Fága:",
     },
+    includes: "Inneholder:",
     searchField: {
       contentTypeResultShowMoreLabel: "Geahča eanet bohtosiid",
       contentTypeResultShowLessLabel: "Geahča unnit bohtosiid",

package/src/locale/messages-sma.ts

@@ -133,6 +133,7 @@ const messages = {
     label: {
       subjects: "Faage:",
     },
+    includes: "Inneholder:",
     searchField: {
       contentTypeResultShowMoreLabel: "Gïehtjh jienebh illedahkh",
       contentTypeResultShowLessLabel: "Gïehtjh vaenebh illedahkh",