Added EventListItem for displaying an event.

I could not see which fonts to use from the figma design, so i have included the ones i thought are correct. Please have a look at that, and comment if you agree or otherwise. I tried different approaches with the CSS layout and ended up with the current grid. Comment if any thoughts on this.
danskernesdigitalebibliotek · Dec 14, 2023 · c145cd6 · c145cd6
1 parent d8c31b8
commit c145cd6
Show file tree

Hide file tree

Showing 4 changed files with 267 additions and 0 deletions.
diff --git a/base.scss b/base.scss
@@ -96,6 +96,7 @@
 @import "./src/stories/Library/Buttons/row-button/row-buttons";
 @import "./src/stories/Library/article-header/article-header";
 @import "./src/stories/Library/event-header/event-header";
+@import "./src/stories/Library/event-list-item/event-list-item";
 @import "./src/stories/Library/image-credited/image-credited";
 @import "./src/stories/Library/event-description/event-description";
 @import "./src/stories/Library/link-with-icon/link-with-icon";

diff --git a/src/stories/Library/event-list-item/EventListItem.stories.tsx b/src/stories/Library/event-list-item/EventListItem.stories.tsx
@@ -0,0 +1,59 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import { EventListItem } from "./EventListItem";
+
+export default {
+  title: "Library / Event List Item",
+  component: EventListItem,
+  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" },
+    },
+    title: {
+      defaultValue: "Ny indsamling til Læs for livet",
+      control: { type: "text" },
+    },
+    description: {
+      defaultValue:
+        "Demokrati betyder helt enkelt folkestyre og er en måde at fordele magten i fx et land",
+      control: { type: "text" },
+    },
+    date: {
+      defaultValue: "25 Feb 2023",
+      control: { type: "text" },
+    },
+    time: {
+      defaultValue: "19:30 - 21:00",
+      control: { type: "text" },
+    },
+    location: {
+      defaultValue: "Stadsbiblioteket",
+      control: { type: "text" },
+    },
+    price: {
+      defaultValue: 80,
+      control: { type: "number" },
+    },
+    href: {
+      defaultValue: "/",
+      control: { type: "text" },
+    },
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7690-56463&mode=design&t=RCEb5jOu9CS9Ui9x-4",
+    },
+    layout: "full",
+  },
+} as ComponentMeta<typeof EventListItem>;
+
+const Template: ComponentStory<typeof EventListItem> = (args) => (
+  <EventListItem {...args} />
+);
+
+export const Default = Template.bind({});
diff --git a/src/stories/Library/event-list-item/EventListItem.tsx b/src/stories/Library/event-list-item/EventListItem.tsx
@@ -0,0 +1,51 @@
+import { ReactComponent as ArrowSmallRight } from "../Arrows/icon-arrow-ui/icon-arrow-ui-small-right.svg";
+import { Tag } from "../tag/Tag";
+
+export type EventListItemProps = {
+  image: string;
+  title: string;
+  description: string;
+  date: string;
+  time: string;
+  location: string;
+  price: number;
+  href: string;
+};
+
+export const EventListItem = ({
+  image,
+  title,
+  description,
+  date,
+  time,
+  location,
+  price,
+  href,
+}: EventListItemProps) => {
+  return (
+    <li className="event-list-item">
+      <a
+        href={href}
+        className="event-list-item__link arrow__hover--right-small"
+      >
+        <div className="event-list-item__image-container">
+          <img src={image} alt={title} className="event-list-item__image" />
+        </div>
+        <div className="event-list-item__content">
+          <Tag hasBackground className="event-list-item__tag">
+            foredrag
+          </Tag>
+          <p className="event-list-item__date">{date}</p>
+          <h3 className="event-list-item__title">{title}</h3>
+          <p className="event-list-item__description">{description}</p>
+          <p className="event-list-item__location">{location}</p>
+          <div className="event-list-item__schedule">
+            <time className="event-list-item__time">{time}</time>
+            <p className="event-list-item__pricing">{price} KR</p>
+          </div>
+        </div>
+        <ArrowSmallRight />
+      </a>
+    </li>
+  );
+};
diff --git a/src/stories/Library/event-list-item/event-list-item.scss b/src/stories/Library/event-list-item/event-list-item.scss
@@ -0,0 +1,156 @@
+.event-list-item {
+  list-style: none;
+  margin-bottom: $s-md;
+}
+.event-list-item__link {
+  @include show-svg-on-hover();
+
+  text-decoration: none;
+  display: grid;
+  padding: $s-lg;
+  row-gap: $s-md;
+  max-width: $layout__max-width;
+  background-color: #fcfcfc;
+  margin: 0 auto;
+}
+.event-list-item__image-container {
+  background: green; // Placeholder for image background / component
+  position: relative;
+  width: 100%;
+  &:before {
+    content: "";
+    display: block;
+    padding-top: 75%; // Fallback for 4:3 aspect ratio
+  }
+  aspect-ratio: 4 / 3;
+}
+
+.event-list-item__image {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.event-list-item__content {
+  @include typography($typo__body-medium);
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.event-list-item__tag {
+  width: max-content;
+  margin-bottom: calc($s-sm * 1.5);
+  grid-column: 1;
+}
+
+.event-list-item__date {
+  @include typography($typo__small-caption);
+  grid-column: 2;
+  text-align: right;
+}
+
+.event-list-item__title {
+  @include typography($typo__h4);
+  @extend %text-truncate;
+  margin-bottom: $s-sm;
+  grid-column: 1/ -1;
+}
+
+.event-list-item__description {
+  @include typography($typo__small-caption);
+  @extend %text-ellipsis-two-lines;
+  -webkit-line-clamp: 3;
+  grid-column: 1 / -1;
+  margin-bottom: $s-xl;
+}
+
+.event-list-item__location {
+  @include typography($typo__small-caption);
+  @extend %link-tag;
+  grid-column: 1;
+  grid-row: 4;
+  align-self: end;
+}
+
+.event-list-item__schedule {
+  grid-column: 2;
+  grid-row: 4;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.event-list-item__time {
+  @include typography($typo__body-placeholder);
+}
+
+@include media-query__small {
+  .event-list-item__link {
+    grid-template-columns: 222px 1fr max-content;
+    gap: $s-2xl;
+  }
+  .event-list-item__image-wrapper {
+    max-width: 222px;
+  }
+  .event-list-item__content {
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: 30px 30px 40px auto 1fr;
+    width: 100%;
+    align-items: center;
+  }
+  .event-list-item__tag {
+    grid-column: 1;
+    grid-row: 1;
+    margin-bottom: unset;
+  }
+  .event-list-item__date {
+    grid-column: 1;
+    grid-row: 2;
+    text-align: initial;
+    align-self: end;
+  }
+
+  .event-list-item__title {
+    grid-column: 1 / span 3;
+    grid-row: 3;
+    margin-bottom: unset;
+  }
+  .event-list-item__description {
+    grid-column: 1 / span 3;
+    grid-row: 4;
+    margin-bottom: unset;
+    -webkit-line-clamp: 2;
+  }
+  .event-list-item__schedule {
+    grid-column: 4;
+    grid-row: 3 / -1;
+    align-self: flex-start;
+    margin-bottom: $s-md;
+  }
+  .event-list-item__location {
+    grid-column: 1;
+    grid-row: 5;
+    margin-top: $s-md;
+  }
+  .event-list-item__time {
+    grid-column: 4;
+    grid-row: 3;
+  }
+  .event-list-item__pricing {
+    grid-column: 4;
+    grid-row: 4;
+  }
+}
+
+.event-list-item > svg {
+  display: none;
+
+  @include media-query__medium {
+    display: initial;
+  }
+}