Merge pull request #2508 from NDLANO/key-figure-spacing

Fix key figure padding
NDLANO · Sep 26, 2024 · f030fd1 · f030fd1
2 parents 633bd1b + cd300af
commit f030fd1
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/packages/ndla-ui/src/Grid/Grid.stories.tsx b/packages/ndla-ui/src/Grid/Grid.stories.tsx
@@ -50,22 +50,28 @@ export const GridKeyPerformanceStory: StoryFn<typeof Grid> = ({ ...args }) => {
   const columns = args.columns === "2x2" ? 4 : parseInt(args.columns);
   const items = new Array(columns).fill(0).map((_, idx) => {
     const args = keyFigureArgs[idx % keyFigureArgs.length];
-    return <Plain key={idx} {...args} />;
+    return (
+      <div key={idx} data-type="grid-cell" data-parallax-cell="false">
+        <Plain key={idx} {...args} />
+      </div>
+    );
   });
   return <Grid {...args}>{items}</Grid>;
 };
 
 export const GridBlogPostStory: StoryFn<typeof Grid> = ({ ...args }) => {
   const columns = args.columns === "2x2" ? 4 : parseInt(args.columns);
   const items = new Array(columns).fill(
-    <BlogPostStory
-      metaImage={BlogPostStory.args?.metaImage!}
-      title={BlogPostStory.args?.title!}
-      size={"normal"}
-      headingLevel={BlogPostStory.args?.headingLevel}
-      url={BlogPostStory.args?.url!}
-      author={BlogPostStory.args?.author}
-    />,
+    <div data-type="grid-cell" data-parallax-cell="false">
+      <BlogPostStory
+        metaImage={BlogPostStory.args?.metaImage!}
+        title={BlogPostStory.args?.title!}
+        size={"normal"}
+        headingLevel={BlogPostStory.args?.headingLevel}
+        url={BlogPostStory.args?.url!}
+        author={BlogPostStory.args?.author}
+      />
+    </div>,
   );
   return <Grid {...args}>{items}</Grid>;
 };
diff --git a/packages/ndla-ui/src/KeyFigure/KeyFigure.tsx b/packages/ndla-ui/src/KeyFigure/KeyFigure.tsx
@@ -15,6 +15,11 @@ const ContentWrapper = styled("div", {
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
+    gap: "xsmall",
+
+    "&:not(:has(> img))": {
+      paddingBlock: "xxlarge",
+    },
   },
 });