Added basic event listing and card

src/app/core/routes/StaticRoutes.js

@@ -17,6 +17,14 @@ export default [
       loading: Loading,
     }),
   },
+  {
+    path: '/events-listing',
+    exact: true,
+    component: Loadable({
+      loader: () => import('~/pages/Listings/EventsListing.page'),
+      loading: Loading,
+    }),
+  },
   // ********************************
   // ˅˅ Do not delete these routes ˅˅
   {

src/app/features/eventListing/components.styled/EventCard.styled.js

@@ -2,7 +2,31 @@ import styled, { css } from 'styled-components';
 
 const EventCardStyled = styled.article`
   ${() => {
-    return css``;
+    return css`
+      display: block;
+      width: 100%;
+      max-width: 550px;
+      margin-bottom: 80px;
+      &:hover {
+        cursor: pointer;
+      }
+      h3 {
+        margin: 10px 0;
+        font-size: 24px;
+        font-weight: 700;
+        line-height: 1.3;
+      }
+      p {
+        margin: 0;
+        margin-bottom: 30px;
+        font-size: 16px;
+        line-height: 1.7;
+      }
+      img {
+        width: 100%;
+        height: auto;
+      }
+    `;
   }};
 `;
 

src/app/features/eventListing/components/EventCard.js

@@ -5,10 +5,21 @@ import { Link } from 'react-router-dom';
 
 import EventCardStyled from '../components.styled/EventCard.styled';
 
-const EventCard = () => {
-  return <p>Event card will go here</p>;
+const EventCard = ({ title, summary, image, className }) => {
+  return (
+    <EventCardStyled className={className}>
+      <img src={image.asset.sys.uri} alt={image.altText} />
+      <h3>{title}</h3>
+      <p>{summary}</p>
+    </EventCardStyled>
+  );
 };
 
-EventCard.propTypes = {};
+EventCard.propTypes = {
+  title: PropTypes.string,
+  summary: PropTypes.string,
+  image: PropTypes.object,
+  className: PropTypes.string,
+};
 
 export default EventCard;

src/app/features/eventListing/components/EventsListing.js

 /* eslint-disable no-unused-vars */
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 
 import { selectVersionStatus } from '~/core/redux/selectors';
@@ -15,11 +16,11 @@ const fetchEntries = async versionStatus => {
     try {
       //DELIVERY API QUERY START//
       let query = new Query(
-        Op.equalTo('sys.contentTypeId', 'blogPost'),
+        Op.equalTo('sys.contentTypeId', 'thEvent'),
         Op.equalTo('sys.versionStatus', versionStatus)
       );
       query.pageSize = 3;
-      query.fields = ['title', 'summary', 'image', 'sys'];
+      query.fields = ['title', 'description', 'bannerImage', 'sys'];
       //DELIVERY API QUERY END//
 
       //DELIVERY API SEARCH START//
@@ -69,7 +70,11 @@ const EventListing = ({ className }) => {
       {results && results.items && (
         <ul>
           {results.items.map((entry, idx) => {
-            return <li key={idx}>{entry.title}</li>;
+            return (
+              <li key={idx}>
+                <Link to={entry.sys.uri}>{entry.title}</Link>
+              </li>
+            );
           })}
         </ul>
       )}

src/app/features/eventListing/stories/EventCard.stories.js

@@ -2,16 +2,32 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 
 import EventCard from '~/features/eventListing/components/EventCard';
-import { text } from '@storybook/addon-knobs';
+import { text, object } from '@storybook/addon-knobs';
 
-storiesOf('Features | Listings', module).add(
+storiesOf('Features | Events', module).add(
   'Event card',
   () => {
+    const image = {
+      altText: 'Some bad alt text',
+      transformations: 'w=1200&h=800&crop=1200,600,0,100',
+      caption: '',
+      asset: {
+        entryDescription: null,
+        sys: {
+          dataFormat: 'asset',
+          contentTypeId: 'image',
+          id: '1c380b5e-cab4-4120-9581-e0d11db75544',
+          uri:
+            'https://live-workshops-cte-master.cloud.contensis.com/image-library/images/CC585EEC5F.xed163892.jpg?w=1200&h=800&crop=1200,600,0,100',
+        },
+        entryTitle: 'CC585EEC5F',
+      },
+    };
     return (
       <EventCard
-        title={text('Title', 'Example title')}
-        description={text('Description', 'Example description')}
-        uri={text('URI', '/events/example-event')}
+        title={text('Title', 'My example title')}
+        summary={text('Summary', 'Example summary')}
+        image={object('image', image)}
       />
     );
   },

src/app/pages/Listings/EventsListing.page.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import MainLayout from '~/layouts/Main.layout';
+import EventsListing from '~/features/eventListing/components/EventsListing';
+
+const EventsListingPage = () => {
+  return (
+    <MainLayout>
+      <h1 className="pageTitle">Events listing page</h1>
+      <EventsListing />
+    </MainLayout>
+  );
+};
+
+EventsListingPage.propTypes = {
+  entry: PropTypes.object,
+};
+
+export default EventsListingPage;