Merge pull request #530 from danskernesdigitalebibliotek/release/form…

…-sprint-8

Formidling sprint 8

base.scss

@@ -97,8 +97,8 @@
 @import "./src/stories/Library/Buttons/row-button/row-button";
 @import "./src/stories/Library/Buttons/row-button/row-buttons";
 @import "./src/stories/Library/article-header/article-header";
-@import "./src/stories/Library/event-list-item/event-list-item";
-@import "./src/stories/Library/event-list/event-list";
+@import "./src/stories/Library/content-list/content-list";
+@import "./src/stories/Library/content-list-item/content-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";
@@ -146,7 +146,7 @@
 @import "./src/stories/Blocks/advanced-search/advanced-search";
 @import "./src/stories/Blocks/article/article";
 @import "./src/stories/Blocks/event-page/event-page";
-@import "./src/stories/Blocks/event-list-page/event-list-page";
+@import "./src/stories/Blocks/content-list-page/content-list-page";
 @import "./src/stories/Blocks/reservation-page/reservation-page-skeleton";
 @import "./src/stories/Blocks/loan-page/loan-page-skeleton";
 

src/stories/Blocks/event-list-page/EventListPage.stories.tsx → src/stories/Blocks/content-list-page/ContentListPage.stories.tsx

@@ -1,18 +1,20 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import EventListPage from "./EventListPage";
+import ContentListPage from "./ContentListPage";
 
 export default {
-  title: "Blocks/Event List Page",
-  component: EventListPage,
+  title: "Blocks/Content List Page",
+  component: ContentListPage,
   parameters: {
     design: {
       type: "figma",
       url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7527-54179&mode=dev",
     },
     layout: "fullscreen",
   },
-} as ComponentMeta<typeof EventListPage>;
+} as ComponentMeta<typeof ContentListPage>;
 
-const Template: ComponentStory<typeof EventListPage> = () => <EventListPage />;
+const Template: ComponentStory<typeof ContentListPage> = () => (
+  <ContentListPage />
+);
 
 export const Default = Template.bind({});

src/stories/Blocks/event-list-page/EventListPage.tsx → src/stories/Blocks/content-list-page/ContentListPage.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import EventList from "../../Library/event-list/EventList";
-import eventListData from "../../Library/event-list/EventListData";
+import ContentList from "../../Library/content-list/ContentList";
+import contentListData from "../../Library/content-list/ContentListData";
 import { InputLabel } from "../../Library/input-label/InputLabel";
 import { Dropdown } from "../../Library/dropdown/Dropdown";
 
@@ -15,19 +15,19 @@ const list = [
   },
 ];
 
-const EventListPage: React.FC = () => {
+const ContentListPage: React.FC = () => {
   return (
-    <div className="event-list-page">
-      <h1 className="event-list-page__heading">Arrangementer</h1>
-      <div className="event-list-page__filters">
-        <div className="event-list-page__filter">
+    <div className="content-list-page">
+      <h1 className="content-list-page__heading">Arrangementer</h1>
+      <div className="content-list-page__filters">
+        <div className="content-list-page__filter">
           <InputLabel text="Kategorier" />
           <Dropdown list={list} ariaLabel="Kategorier" arrowIcon="chevron" />
         </div>
       </div>
-      <EventList events={eventListData} />
+      <ContentList items={contentListData} />
     </div>
   );
 };
 
-export default EventListPage;
+export default ContentListPage;

src/stories/Blocks/event-list-page/event-list-page.scss → src/stories/Blocks/content-list-page/content-list-page.scss

@@ -1,14 +1,14 @@
-.event-list-page {
+.content-list-page {
   @include block-spacing();
   background-color: $color__global-primary;
 }
 
-.event-list-page__heading {
+.content-list-page__heading {
   @include layout-container($block-max-width__large);
   @include typography($typo__h2);
 }
 
-.event-list-page__filters {
+.content-list-page__filters {
   @include layout-container($block-max-width__large);
 
   display: flex;

src/stories/Blocks/header/Header.tsx

@@ -125,11 +125,10 @@ export const Header = (props: HeaderProps) => {
 
         <div className="header__clock">
           <Pagefold isInheriting={false} isAContainer={false} size="medium" />
-          <div className="header__clock-items">
+          <a href="#" className="header__clock-items">
             <WatchStaticIcon className="mb-8" />
-            <span className="text-small-caption">Fredag</span>
-            <span className="text-small-caption">28 Maj</span>
-          </div>
+            <span className="text-small-caption">Opening hours</span>
+          </a>
         </div>
       </header>
       <HeaderSidebarNav menuLinks={menuItems} />

src/stories/Blocks/header/header.scss

@@ -195,6 +195,7 @@
 }
 
 .header__clock-items {
+  text-decoration: none;
   display: flex;
   flex-direction: column;
   align-items: center;

src/stories/Library/Heros/hero-link/HeroLink.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import clsx from "clsx";
-import { ReactComponent as ArrowLargeRight } from "../../Arrows/icon-arrow-ui/icon-arrow-ui-large-right.svg";
 import HeroInner from "../hero/HeroInner";
 import { HeroProps } from "../hero/Hero";
 import HeroVisual from "../hero/HeroVisual";
@@ -31,10 +30,8 @@ const HeroLink: React.FunctionComponent<HeroLinkProps> = ({
           title={title}
           description={description}
           descriptionItems={descriptionItems}
+          arrow
         />
-        <div>
-          <ArrowLargeRight />
-        </div>
       </a>
 
       <HeroVisual image={image} />

src/stories/Library/Heros/hero/HeroInner.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import Tag from "../../tag/Tag";
+import { ReactComponent as ArrowLargeRight } from "../../Arrows/icon-arrow-ui/icon-arrow-ui-large-right.svg";
 import ListDescription, {
   ListData,
 } from "../../Lists/list-description/ListDescription";
@@ -12,6 +13,7 @@ export type HeroInnerProps = {
   descriptionItems?: ListData;
   cta?: string;
   tag?: string;
+  arrow?: boolean;
 };
 
 const HeroInner: React.FunctionComponent<HeroInnerProps> = ({
@@ -22,6 +24,7 @@ const HeroInner: React.FunctionComponent<HeroInnerProps> = ({
   descriptionItems,
   cta,
   tag,
+  arrow,
 }) => {
   return (
     <div className="hero__inner">
@@ -44,6 +47,12 @@ const HeroInner: React.FunctionComponent<HeroInnerProps> = ({
       {description && (
         <div className="hero__description">
           <p>{description} </p>
+
+          {arrow && (
+            <div>
+              <ArrowLargeRight />
+            </div>
+          )}
         </div>
       )}
       {cta && (

src/stories/Library/Heros/hero/hero.scss

@@ -25,6 +25,7 @@ $_hero-column-breakpoint: "small";
   display: grid;
   gap: $s-lg;
   padding-bottom: $s-2xl;
+  text-decoration: none;
   @include media-query__name($_hero-column-breakpoint) {
     grid-template-columns: 2fr 1fr;
     gap: 0;
@@ -46,7 +47,7 @@ $_hero-column-breakpoint: "small";
 }
 
 .hero__description {
-  margin-bottom: $s-md;
+  @include typography($typo__body-placeholder);
   flex-grow: 1;
 
   > * {

src/stories/Library/card-list-page/ResultPager.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { Button } from "../Buttons/button/Button";
 
 interface ResultPagerProps {
@@ -13,7 +14,7 @@ const ResultPager = ({
 }: ResultPagerProps) => {
   const total = totalResults.toLocaleString("da-Dk");
   return (
-    <div className={`${classNames} result-pager`}>
+    <div className={clsx("result-pager", classNames)}>
       <p className="text-small-caption result-pager__title">
         {`Showing ${currentResults} out of ${total} results`}
       </p>

src/stories/Library/event-list-item/EventListItem.stories.tsx → src/stories/Library/content-list-item/ContentListItem.stories.tsx

@@ -1,10 +1,10 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { withDesign } from "storybook-addon-designs";
-import { EventListItem } from "./EventListItem";
+import { ContentListItem } from "./ContentListItem";
 
 export default {
-  title: "Library / Event List Item",
-  component: EventListItem,
+  title: "Library / Content List Item",
+  component: ContentListItem,
   decorators: [withDesign],
   argTypes: {
     image: {
@@ -54,10 +54,10 @@ export default {
     },
     layout: "full",
   },
-} as ComponentMeta<typeof EventListItem>;
+} as ComponentMeta<typeof ContentListItem>;
 
-const Template: ComponentStory<typeof EventListItem> = (args) => (
-  <EventListItem {...args} />
+const Template: ComponentStory<typeof ContentListItem> = (args) => (
+  <ContentListItem {...args} />
 );
 
 export const Default = Template.bind({});

src/stories/Library/content-list-item/ContentListItem.tsx

@@ -0,0 +1,65 @@
+import { ReactComponent as ArrowSmallRight } from "../Arrows/icon-arrow-ui/icon-arrow-ui-small-right.svg";
+import Tag from "../tag/Tag";
+
+export type ContentListItemProps = {
+  eventSeriesId?: string;
+  image: string;
+  tagText: string;
+  title: string;
+  description: string;
+  date: string;
+  time: string;
+  location: string;
+  price: string;
+  href: string;
+  isStacked?: boolean;
+};
+
+export const ContentListItem: React.FC<ContentListItemProps> = ({
+  image,
+  tagText,
+  title,
+  description,
+  date,
+  time,
+  location,
+  price,
+  href,
+}) => {
+  // Hardcoded placeholders for datetime
+  // These are calculated in the corresponding template in the CMS
+  const placeholderDateTime = "2023-03-10T15:00"; // ISO format date and time
+
+  return (
+    <a href={href} className="content-list-item arrow__hover--right-small">
+      <div className="content-list-item__image-container">
+        <img src={image} alt={title} className="content-list-item__image" />
+      </div>
+      <div className="content-list-item__content">
+        {tagText && (
+          <Tag hasBackground className="content-list-item__tag">
+            {tagText}
+          </Tag>
+        )}
+        <div className="content-list-item__date">{date}</div>
+        <h2 className="content-list-item__title">{title}</h2>
+        <div className="content-list-item__description">
+          <p>{description}</p>
+        </div>
+        <div className="content-list-item__content-bottom-container">
+          <p className="content-list-item__location">{location}</p>
+        </div>
+        <div className="content-list-item__content-right-container">
+          <time
+            className="content-list-item__time"
+            dateTime={placeholderDateTime}
+          >
+            {time}
+          </time>
+          <p className="content-list-item__pricing">{price}</p>
+        </div>
+      </div>
+      <ArrowSmallRight />
+    </a>
+  );
+};

src/stories/Library/event-list-item/EventListItemStacked.stories.tsx → src/stories/Library/content-list-item/ContentListItemStacked.stories.tsx

@@ -1,12 +1,16 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { withDesign } from "storybook-addon-designs";
-import EventListItemStacked from "./EventListItemStacked";
+import ContentListItemStacked from "./ContentListItemStacked";
 
 export default {
-  title: "Library / Event List Item Stacked",
-  component: EventListItemStacked,
+  title: "Library / Content List Item Stacked",
+  component: ContentListItemStacked,
   decorators: [withDesign],
   argTypes: {
+    title: {
+      defaultValue: "Hidden Title",
+      control: { type: "text" },
+    },
     date: {
       defaultValue: "01 Feb 2023",
       control: { type: "text" },
@@ -27,10 +31,10 @@ export default {
     },
     layout: "full",
   },
-} as ComponentMeta<typeof EventListItemStacked>;
+} as ComponentMeta<typeof ContentListItemStacked>;
 
-const Template: ComponentStory<typeof EventListItemStacked> = (args) => (
-  <EventListItemStacked {...args} />
+const Template: ComponentStory<typeof ContentListItemStacked> = (args) => (
+  <ContentListItemStacked {...args} />
 );
 
 export const Default = Template.bind({});

src/stories/Library/content-list-item/ContentListItemStacked.tsx

@@ -0,0 +1,32 @@
+import { FC } from "react";
+import { ReactComponent as ArrowSmallRight } from "../Arrows/icon-arrow-ui/icon-arrow-ui-small-right.svg";
+
+interface ContentListItemStackedProps {
+  title: string;
+  href: string;
+  time: string;
+  date: string;
+}
+
+const ContentListItemStacked: FC<ContentListItemStackedProps> = ({
+  title,
+  href = "#",
+  time,
+  date,
+}) => {
+  return (
+    <a
+      href={href}
+      className="content-list-item-stacked arrow__hover--right-small"
+    >
+      <h3 className="hide-visually">{title}</h3>
+      <time className="content-list-item-stacked__content">
+        <span className="content-list-item-stacked__date">{date}</span>
+        <span className="content-list-item-stacked__time">{time}</span>
+      </time>
+      <ArrowSmallRight />
+    </a>
+  );
+};
+
+export default ContentListItemStacked;