@ndla/ui 56.0.54-alpha.0 → 56.0.55-alpha.0
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.
- package/dist/panda.buildinfo.json +1 -0
- package/dist/styles.css +4 -0
- package/es/Grid/Grid.js +5 -0
- package/lib/Grid/Grid.js +5 -0
- package/package.json +2 -2
- package/src/Grid/Grid.tsx +5 -0
- package/src/Pitch/Pitch.stories.tsx +16 -12
|
@@ -324,6 +324,7 @@
|
|
|
324
324
|
"gridColumnGap]___[value:medium",
|
|
325
325
|
"backgroundColor]___[value:background.subtle",
|
|
326
326
|
"gridTemplateColumns]___[value:repeat(2, minmax(0, 1fr))",
|
|
327
|
+
"marginTop]___[value:auto]___[cond:& > [data-embed-type='pitch']<___>& > :last-child",
|
|
327
328
|
"gridTemplateColumns]___[value:repeat(1, minmax(0, 1fr))]___[cond:tabletDown",
|
|
328
329
|
"gridTemplateColumns]___[value:repeat(2, minmax(0, 1fr))]___[cond:tabletToDesktop",
|
|
329
330
|
"display]___[value:flex]___[cond:tabletToDesktop<___>& > div:nth-child(3):last-child",
|
package/dist/styles.css
CHANGED
|
@@ -1258,6 +1258,10 @@
|
|
|
1258
1258
|
font-weight: var(--font-weights-bold);
|
|
1259
1259
|
}
|
|
1260
1260
|
|
|
1261
|
+
.\[\&_\>_\[data-embed-type\=\'pitch\'\]\]\:\[\&_\>_\:last-child\]\:mt_auto > [data-embed-type='pitch'] > :last-child {
|
|
1262
|
+
margin-top: auto;
|
|
1263
|
+
}
|
|
1264
|
+
|
|
1261
1265
|
.focusVisible\:after\:pos_absolute:is(:focus-visible, [data-focus-visible])::after {
|
|
1262
1266
|
position: absolute;
|
|
1263
1267
|
}
|
package/es/Grid/Grid.js
CHANGED
|
@@ -19,6 +19,11 @@ const GridContainer = styled("div", {
|
|
|
19
19
|
backgroundColor: "background.subtle",
|
|
20
20
|
minWidth: "surface.xxsmall",
|
|
21
21
|
gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
|
|
22
|
+
"& > [data-embed-type='pitch']": {
|
|
23
|
+
"& > :last-child": {
|
|
24
|
+
marginTop: "auto"
|
|
25
|
+
}
|
|
26
|
+
},
|
|
22
27
|
tabletDown: {
|
|
23
28
|
gridTemplateColumns: "repeat(1, minmax(0, 1fr))"
|
|
24
29
|
},
|
package/lib/Grid/Grid.js
CHANGED
|
@@ -25,6 +25,11 @@ const GridContainer = (0, _jsx2.styled)("div", {
|
|
|
25
25
|
backgroundColor: "background.subtle",
|
|
26
26
|
minWidth: "surface.xxsmall",
|
|
27
27
|
gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
|
|
28
|
+
"& > [data-embed-type='pitch']": {
|
|
29
|
+
"& > :last-child": {
|
|
30
|
+
marginTop: "auto"
|
|
31
|
+
}
|
|
32
|
+
},
|
|
28
33
|
tabletDown: {
|
|
29
34
|
gridTemplateColumns: "repeat(1, minmax(0, 1fr))"
|
|
30
35
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ndla/ui",
|
|
3
|
-
"version": "56.0.
|
|
3
|
+
"version": "56.0.55-alpha.0",
|
|
4
4
|
"description": "UI component library for NDLA",
|
|
5
5
|
"license": "GPL-3.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"publishConfig": {
|
|
59
59
|
"access": "public"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "61d88c7c1bbad19fd1d94f13c0088b0684f95ff6"
|
|
62
62
|
}
|
package/src/Grid/Grid.tsx
CHANGED
|
@@ -20,6 +20,11 @@ const GridContainer = styled("div", {
|
|
|
20
20
|
backgroundColor: "background.subtle",
|
|
21
21
|
minWidth: "surface.xxsmall",
|
|
22
22
|
gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
|
|
23
|
+
"& > [data-embed-type='pitch']": {
|
|
24
|
+
"& > :last-child": {
|
|
25
|
+
marginTop: "auto",
|
|
26
|
+
},
|
|
27
|
+
},
|
|
23
28
|
tabletDown: {
|
|
24
29
|
gridTemplateColumns: "repeat(1, minmax(0, 1fr))",
|
|
25
30
|
},
|
|
@@ -8,24 +8,26 @@
|
|
|
8
8
|
|
|
9
9
|
import { Meta, StoryFn } from "@storybook/react";
|
|
10
10
|
import { PageContent } from "@ndla/primitives";
|
|
11
|
-
import { Pitch } from "./Pitch";
|
|
11
|
+
import { Pitch, Props } from "./Pitch";
|
|
12
12
|
import { ArticleContent, ArticleWrapper } from "../Article";
|
|
13
13
|
import { Grid } from "../Grid";
|
|
14
14
|
|
|
15
|
+
const args: Props = {
|
|
16
|
+
title: "Min pitch",
|
|
17
|
+
description:
|
|
18
|
+
"Vil du øve på spansk? Kunne du tenke deg hjelp til naturfag? Drømmer du om en prat med Mandela? Lag din egen praterobot!",
|
|
19
|
+
url: "#",
|
|
20
|
+
metaImage: {
|
|
21
|
+
alt: "Yonghetempelet i Beijing. Foto.",
|
|
22
|
+
url: "https://api.test.ndla.no/image-api/raw/id//62870",
|
|
23
|
+
},
|
|
24
|
+
};
|
|
25
|
+
|
|
15
26
|
export default {
|
|
16
27
|
title: "Components/Pitch",
|
|
17
28
|
component: Pitch,
|
|
18
29
|
tags: ["autodocs"],
|
|
19
|
-
args:
|
|
20
|
-
title: "Min bloggpost",
|
|
21
|
-
description:
|
|
22
|
-
"Vil du øve på spansk? Kunne du tenke deg hjelp til naturfag? Drømmer du om en prat med Mandela? Lag din egen praterobot!",
|
|
23
|
-
url: "#",
|
|
24
|
-
metaImage: {
|
|
25
|
-
alt: "Yonghetempelet i Beijing. Foto.",
|
|
26
|
-
url: "https://api.test.ndla.no/image-api/raw/id//62870",
|
|
27
|
-
},
|
|
28
|
-
},
|
|
30
|
+
args: args,
|
|
29
31
|
decorators: [
|
|
30
32
|
(Story) => (
|
|
31
33
|
<PageContent variant="page" asChild>
|
|
@@ -43,7 +45,9 @@ export const Default: StoryFn<typeof Pitch> = ({ ...args }) => {
|
|
|
43
45
|
return (
|
|
44
46
|
<Grid columns="2" background="transparent">
|
|
45
47
|
<Pitch {...args} />
|
|
46
|
-
<Pitch {...args} />
|
|
48
|
+
<Pitch {...args} description="Kortere beskrivelse" />
|
|
47
49
|
</Grid>
|
|
48
50
|
);
|
|
49
51
|
};
|
|
52
|
+
|
|
53
|
+
Default.args = args;
|