@ndla/ui 56.0.54-alpha.0 → 56.0.56-alpha.0

package/dist/panda.buildinfo.json

@@ -324,6 +324,8 @@
       "gridColumnGap]___[value:medium",
       "backgroundColor]___[value:background.subtle",
       "gridTemplateColumns]___[value:repeat(2, minmax(0, 1fr))",
+      "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

@@ -1063,6 +1063,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,6 +1262,10 @@
     font-weight: var(--font-weights-bold);
 }
 
+  .\[\&_\: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;
+}
+
   .focusVisible\:after\:pos_absolute:is(:focus-visible, [data-focus-visible])::after {
     position: absolute;
 }

package/es/Grid/Grid.js

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

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/lib/Grid/Grid.js

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

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/package.json

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

package/src/Grid/Grid.tsx

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

package/src/Pitch/Pitch.stories.tsx

@@ -8,24 +8,26 @@
 
 import { Meta, StoryFn } from "@storybook/react";
 import { PageContent } from "@ndla/primitives";
-import { Pitch } from "./Pitch";
+import { Pitch, Props } from "./Pitch";
 import { ArticleContent, ArticleWrapper } from "../Article";
 import { Grid } from "../Grid";
 
+const args: Props = {
+  title: "Min pitch",
+  description:
+    "Vil du øve på spansk? Kunne du tenke deg hjelp til naturfag? Drømmer du om en prat med Mandela? Lag din egen praterobot!",
+  url: "#",
+  metaImage: {
+    alt: "Yonghetempelet i Beijing. Foto.",
+    url: "https://api.test.ndla.no/image-api/raw/id//62870",
+  },
+};
+
 export default {
   title: "Components/Pitch",
   component: Pitch,
   tags: ["autodocs"],
-  args: {
-    title: "Min bloggpost",
-    description:
-      "Vil du øve på spansk? Kunne du tenke deg hjelp til naturfag? Drømmer du om en prat med Mandela? Lag din egen praterobot!",
-    url: "#",
-    metaImage: {
-      alt: "Yonghetempelet i Beijing. Foto.",
-      url: "https://api.test.ndla.no/image-api/raw/id//62870",
-    },
-  },
+  args: args,
   decorators: [
     (Story) => (
       <PageContent variant="page" asChild>
@@ -42,8 +44,14 @@ export default {
 export const Default: StoryFn<typeof Pitch> = ({ ...args }) => {
   return (
     <Grid columns="2" background="transparent">
-      <Pitch {...args} />
-      <Pitch {...args} />
+      <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>
   );
 };
+
+Default.args = args;

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}