{placeholderText}
- )}
-
+
{typeTag ? (
{typeTag}
diff --git a/src/stories/Library/card/card.scss b/src/stories/Library/card/card.scss
index 0b6c2df71..615a36e31 100644
--- a/src/stories/Library/card/card.scss
+++ b/src/stories/Library/card/card.scss
@@ -4,23 +4,6 @@
margin-bottom: $s-sm;
}
-.card--has-no-image {
- .card__media {
- @extend %identity-placeholder;
- }
-}
-
-.card__placeholder-text {
- @extend %identity-placeholder-text;
-}
-
-.card--has-image {
- // This is necessary to get object-fit to work.
- * {
- height: 100%;
- }
-}
-
.card__tags {
display: flex;
margin-bottom: $s-sm;
@@ -96,24 +79,27 @@
%card-variant--x-large,
.card[data-variant="x-large"] {
+ @include media-container--card;
+
width: 200px;
@include media-query__name($breakpoint__large-card) {
width: 440px;
}
- &.card--has-no-image {
+ &.card--has-no-media {
// We only want the page fold on 1:1 view-modes.
@extend %identity-pagefold;
}
- .card__placeholder-text {
- @include typography($typo__card-placeholder);
+ &.card--has-media {
+ .card__media {
+ @extend %identity-placeholder;
+ }
}
+ // stylelint-disable-next-line no-descending-specificity -- Stylelint wants us to re-order the file, but it actually would make it less readable.
.card__media {
- @extend %identity-placeholder;
-
aspect-ratio: 1/1;
}
}
@@ -122,21 +108,21 @@
.card[data-variant="small"] {
width: 206px;
+ // stylelint-disable-next-line no-descending-specificity -- Stylelint wants us to re-order the file, but it actually would make it less readable.
.card__media {
aspect-ratio: 1/1;
}
- .card__tags,
- .card__media {
+ // stylelint-disable-next-line no-descending-specificity -- Stylelint wants us to re-order the file, but it actually would make it less readable.
+ .card__media,
+ .card__tags {
margin-bottom: $s-xs;
}
// On desktop sizes this small, there is no space for placeholder text, and
// extra tags, but we can still show it for screenreaders.
@include media-query__name($breakpoint__large-card) {
- .card__placeholder-text {
- font-size: 0;
- }
+ @include media-container--small;
.card__tag {
@include typography($typo__byline-tags--small);
@@ -156,6 +142,7 @@
width: 321px;
}
+ // stylelint-disable-next-line no-descending-specificity -- Stylelint wants us to re-order the file, but it actually would make it less readable.
.card__media {
// Odd aspect ratio, taken from the design.
aspect-ratio: 321/426;
diff --git a/src/stories/Library/content-list-item/ContentListItem.stories.tsx b/src/stories/Library/content-list-item/ContentListItem.stories.tsx
index 9ec69a21e..762fa2a78 100644
--- a/src/stories/Library/content-list-item/ContentListItem.stories.tsx
+++ b/src/stories/Library/content-list-item/ContentListItem.stories.tsx
@@ -1,18 +1,13 @@
import { ComponentStory, ComponentMeta } from "@storybook/react";
import { withDesign } from "storybook-addon-designs";
import { ContentListItem } from "./ContentListItem";
+import ImageCredited from "../image-credited/ImageCredited";
export default {
title: "Library / Content List Item",
component: ContentListItem,
decorators: [withDesign],
argTypes: {
- image: {
- defaultValue:
- "https://plus.unsplash.com/premium_photo-1696886122527-e4303b76aa8f?q=80&w=5156&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-
- control: { type: "text" },
- },
tagText: {
defaultValue: "Foredrag",
control: { type: "text" },
@@ -46,6 +41,15 @@ export default {
defaultValue: "/",
control: { type: "text" },
},
+ image: {
+ defaultValue: (
+ = ({
image,
+ placeholderText,
tagText,
title,
description,
@@ -33,7 +37,7 @@ export const ContentListItem: React.FC = ({
return (
- 
+
{tagText && (
diff --git a/src/stories/Library/content-list-item/content-list-item.scss b/src/stories/Library/content-list-item/content-list-item.scss
index cb8507eb7..587d77c48 100644
--- a/src/stories/Library/content-list-item/content-list-item.scss
+++ b/src/stories/Library/content-list-item/content-list-item.scss
@@ -68,23 +68,10 @@ $_stacked-reduce-width: 20px;
}
.content-list-item__image-container {
- @extend %identity-placeholder-pseudo;
grid-area: image;
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
-
- // We want to treat everything inside the image-container as image related.
- // To make object-fit work, it is important that everything has 100%
- // height and width set. We cannot know 100% what markup Drupal will use,
- // so we'll use a wildcard here.
- * {
- width: 100%;
- height: 100%;
- object-fit: cover;
- position: relative;
- z-index: $z-10;
- }
}
.content-list-item__content {
@@ -201,6 +188,8 @@ $_stacked-reduce-width: 20px;
}
.content-list-item__image-container {
+ @include media-container--small;
+
grid-area: image;
max-height: $_content-list-item--image-height;
min-height: $_content-list-item--image-height;
diff --git a/src/stories/Library/content-list/ContentList.stories.tsx b/src/stories/Library/content-list/ContentList.stories.tsx
index b2e1ce36d..d3165c341 100644
--- a/src/stories/Library/content-list/ContentList.stories.tsx
+++ b/src/stories/Library/content-list/ContentList.stories.tsx
@@ -1,6 +1,6 @@
import { ComponentMeta, ComponentStory } from "@storybook/react";
import ContentList from "./ContentList";
-import contentListData from "./ContentListData";
+import ContentListData from "./ContentListData";
export default {
title: "Library / Content List",
@@ -20,5 +20,5 @@ const Template: ComponentStory = (args) => (
export const Default = Template.bind({});
Default.args = {
- items: contentListData,
+ items: ContentListData,
};
diff --git a/src/stories/Library/content-list/ContentListData.ts b/src/stories/Library/content-list/ContentListData.tsx
similarity index 66%
rename from src/stories/Library/content-list/ContentListData.ts
rename to src/stories/Library/content-list/ContentListData.tsx
index 52f2693de..e7c866a92 100644
--- a/src/stories/Library/content-list/ContentListData.ts
+++ b/src/stories/Library/content-list/ContentListData.tsx
@@ -1,11 +1,12 @@
import { ContentListItemProps } from "../content-list-item/ContentListItem";
+import ImageCredited from "../image-credited/ImageCredited";
const contentListData: ContentListItemProps[] = [
{
eventSeriesId: "a",
- image:
- "https://images.unsplash.com/photo-1549277513-f1b32fe1f8f5?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-
+ image: (
+ = ({
{src ? (
<>
- 
+
{description}
diff --git a/src/stories/Library/image-credited/image-credited.scss b/src/stories/Library/image-credited/image-credited.scss
index ee3567c10..c018287c5 100644
--- a/src/stories/Library/image-credited/image-credited.scss
+++ b/src/stories/Library/image-credited/image-credited.scss
@@ -1,5 +1,9 @@
-.image-credited__img {
+.image-credited__image {
width: 100%;
+
+ * {
+ width: 100%;
+ }
}
.image-credited__info {
diff --git a/src/stories/Library/media-container/MediaContainer.stories.tsx b/src/stories/Library/media-container/MediaContainer.stories.tsx
new file mode 100644
index 000000000..ce6ed296b
--- /dev/null
+++ b/src/stories/Library/media-container/MediaContainer.stories.tsx
@@ -0,0 +1,34 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import MediaContainer from "./MediaContainer";
+import ImageCredited from "../image-credited/ImageCredited";
+
+export default {
+ title: "Library / Media container",
+ component: MediaContainer,
+ argTypes: {
+ media: {
+ defaultValue: (
+ ;
+
+const Template: ComponentStory = (args) => (
+ = ({
+ media,
+ placeholderText = "",
+}) => {
+ const classes = clsx("media-container", {
+ "media-container--placeholder": !media,
+ });
+
+ return (
+ = ({
media,
placeholderText,
}) => {
- const classes = clsx("nav-spot", "arrow__hover--right-large", {
- "nav-spot--has-no-media": !media,
- "nav-spot--has-media": media,
- });
-
return (
-
+
-
- {media || (
-
+
+
+
{(description || year) && (
+ {media ? (
+
+ );
+};
+
+export default MediaContainer;
diff --git a/src/stories/Library/media-container/media-container.scss b/src/stories/Library/media-container/media-container.scss
new file mode 100644
index 000000000..ccc7aacec
--- /dev/null
+++ b/src/stories/Library/media-container/media-container.scss
@@ -0,0 +1,62 @@
+@mixin media-container--grid {
+ .media-container {
+ .media-container__placeholder-text {
+ @include typography($typo__card-placeholder--grid);
+ }
+ }
+}
+
+@mixin media-container--card {
+ .media-container {
+ .media-container__placeholder-text {
+ @include typography($typo__card-placeholder);
+ }
+ }
+}
+
+@mixin media-container--small {
+ .media-container {
+ &--placeholder {
+ @include identity-placeholder($placeholder-paddings--small);
+ }
+
+ .media-container__placeholder-text {
+ font-size: 14px;
+ line-height: 16px;
+ padding: $s-md;
+ }
+ }
+}
+
+.media-container {
+ height: 100%;
+ width: 100%;
+
+ &--placeholder {
+ @include identity-placeholder;
+ }
+}
+
+.media-container__media {
+ height: 100%;
+ width: 100%;
+
+ // This is necessary to make object fit work.
+ .image-credited__image,
+ figure,
+ img {
+ width: 100%;
+ height: 100%;
+ }
+
+ img {
+ height: 100%;
+ width: 100%;
+ object-fit: cover;
+ object-position: center;
+ }
+}
+
+.media-container__placeholder-text {
+ @extend %identity-placeholder-text;
+}
diff --git a/src/stories/Library/nav-spot/NavSpot.tsx b/src/stories/Library/nav-spot/NavSpot.tsx
index f24094752..75fb3028b 100644
--- a/src/stories/Library/nav-spot/NavSpot.tsx
+++ b/src/stories/Library/nav-spot/NavSpot.tsx
@@ -1,6 +1,6 @@
import { FC, ReactNode } from "react";
-import clsx from "clsx";
import { ReactComponent as Arrow } from "../Arrows/icon-arrow-ui/icon-arrow-ui-large-right.svg";
+import MediaContainer from "../media-container/MediaContainer";
type NavSpotProps = {
variant?: string;
@@ -17,19 +17,15 @@ const NavSpot: FC {media}
+ ) : (
+
+ {placeholderText}
+
+ )}
+ {placeholderText}
- )}
-
+